src/header/header.css

@import '../global/variables.css';

@value link, active from '../link/link.css';

:root,
:host {
  --ring-header-link-color: var(--ring-link-color);
}

:global(.ring-ui-theme-dark) {
  --ring-header-link-color: var(--ring-text-color);
}

.header {
  --ring-header-compensate: 3px;
  --ring-header-compensated: calc(calc(var(--ring-unit) * 8) - var(--ring-header-compensate));

  display: flex;
  overflow: hidden;
  align-items: center;

  box-sizing: border-box;
  height: calc(var(--ring-unit) * 8);

  color: var(--ring-text-color);

  background-color: var(--ring-navigation-background-color);

  line-height: var(--ring-header-compensated);

  & > * {
    display: inline-block;

    box-sizing: border-box;
    height: calc(var(--ring-unit) * 8);
    padding: 0 calc(var(--ring-unit) * 1.5) var(--ring-header-compensate);
  }

  /* override link */
  & .link {
    color: var(--ring-header-link-color);
  }

  & .active {
    color: var(--ring-active-text-color);
  }
}

.headerSpaced {
  & > *:first-child {
    padding-left: calc(var(--ring-unit) * 4);
  }

  & > *:last-child {
    padding-right: calc(var(--ring-unit) * 4);
  }
}

.headerVertical {
  display: inline-flex;
  align-items: center;
  flex-direction: column;

  height: 100%;

  color: var(--ring-text-color);

  background-color: var(--ring-navigation-background-color);

  /* override link */
  & .link {
    color: var(--ring-header-link-color);
  }

  & .active {
    color: var(--ring-active-text-color);
  }
}

html:global(.ring-ui-theme-dark) .headerVertical {
  box-shadow: inset -1px 0 var(--ring-line-color);
}

.logo {
  display: inline-flex;
  align-items: center;

  height: calc(var(--ring-unit) * 8);

  color: var(--ring-navigation-background-color);

  line-height: normal;

  & svg {
    vertical-align: bottom;
  }
}

.headerVertical .logo {
  height: auto;
  padding: calc(var(--ring-unit) * 2) calc(var(--ring-unit) * 1.5);
}

.links {
  display: flex;
  align-items: center;
  flex-direction: column;

  min-height: calc(var(--ring-unit) * 5);
}

.tray {
  align-items: flex-end;

  margin-left: auto;
  padding: 0 0 var(--ring-header-compensate);
}

/* override .header > * */
.tray.tray {
  display: flex;
}

.headerVertical .tray {
  align-items: center;
  flex-direction: column;

  margin-top: auto;
  margin-left: 0;
  padding: 0;
}

.trayItemContent {
  height: var(--ring-header-compensated);
}

.icon {
  display: inline-block;
  flex-shrink: 0;

  width: calc(var(--ring-unit) * 5);

  text-align: center;

  vertical-align: top;
}

/* override button */
.icon.icon {
  height: var(--ring-header-compensated);

  padding-top: calc(var(--ring-unit) / 2);

  line-height: var(--ring-header-compensated);
}

.headerVertical .icon {
  width: auto;
  height: calc(var(--ring-unit) * 5);

  padding: 0 calc(var(--ring-unit) * 2.75);

  line-height: normal;
}

.main svg {
  color: var(--ring-main-color);
}

.rotatable svg {
  transition: transform 0.3s ease-out;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
}

.rotated svg {
  transform: rotate(90deg);
}

.profileEmpty {
  align-items: center;

  width: auto;
  height: var(--ring-header-compensated);
  padding-left: var(--ring-unit);

  vertical-align: bottom;
}

/* override dropdown */
.profileEmpty.profileEmpty {
  display: inline-flex;
}

.profile {
  composes: profileEmpty;

  height: var(--ring-header-compensated);

  cursor: pointer;
}

.headerVertical .profile {
  height: auto;
  padding: calc(var(--ring-unit) * 2);
}

.anchorClassName {
  composes: resetButton from '../global/global.css';

  display: flex;
  align-items: center;
  gap: calc(1.5 * var(--ring-unit));
}

.avatarWrapper {
  line-height: 0;
}

.hasUpdates {
  position: relative;

  &::after {
    position: absolute;
    top: calc(15% - 5px);
    right: calc(15% - 5px);

    display: block;

    width: var(--ring-unit);
    height: var(--ring-unit);

    content: '';

    border: 1px solid var(--ring-white-text-color);
    border-radius: 50%;
    background-color: var(--ring-link-hover-color);
  }
}