.header {
  scrollbar-color: var(--color-border-hover) var(--color-border);
  scrollbar-width: thin;

  position: sticky;
  z-index: var(--zi-header);
  top: 0;
  right: 0;
  left: 0;

  overflow: auto hidden;
  display: block;

  margin: 0 0 2em;
  border-bottom: var(--border-width) solid transparent;

  transition: var(--transition);

  // .header__wrapper
  &__wrapper {
    display: flex;
    gap: 1.5em;
    justify-content: space-between;
  }

  // .header__divider
  &__divider {
    position: relative;
    margin-left: 0.5em;

    &::before {
      content: "";

      position: absolute;
      top: 50%;
      right: calc(100% + 0.75em + var(--border-width) / 2);
      transform: translateY(-50%);

      width: var(--border-width);
      height: 1.25em;

      background-color: var(--color-border);
    }

    // .header__divider + .header__divider
    & + .header__divider {
      margin-left: 0;
    }
  }

  // .header__logo
  &__logo {
    display: flex;
    flex-shrink: 0;
    gap: 0.5em;
    align-items: center;

    // .header__logo-image
    &-image {
      display: block;
      flex-shrink: 0;
      width: auto;
      height: 1.5em;
    }

    // .header__logo-text
    &-text {
      font-weight: var(--font-medium);
      color: var(--color-heading);
    }
  }

  // .header__nav
  &__nav {
    display: flex;
    flex-grow: 1;
    gap: 1.5em;
    justify-content: flex-end;

    // .header__nav-item
    &-item {
      cursor: pointer;

      display: inline-flex;
      align-items: center;
      justify-content: center;

      padding: 2rem 0;

      font-size: 0.85em;
      font-weight: var(--font-medium);
      line-height: 1.2;
      color: var(--color-heading);
      text-align: center;
      white-space: nowrap;

      transition: var(--transition);

      &:hover, &:focus, &:active {
        color: var(--color-primary-hover);
      }

       // .header__nav-item.active
      &.active {
        color: var(--color-primary);
      }
    }
  }

  // .header__appearance
  &__appearance {
    @extend .header__divider;
    display: flex;
    flex-shrink: 0;
    gap: 0.5em;

    // .header__appearance-item
    &-item {
      cursor: pointer;

      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      justify-content: center;

      width: 1.25em;

      color: var(--color-text);
      text-align: center;

      transition: var(--transition);

      &:hover {
        color: var(--color-heading);
      }

      & > * {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain
      }
    }
  }

  // .header__social
  &__social {
    @extend .header__appearance;

    // .header__social-item
    &-item {
      @extend .header__appearance-item;
    }
  }

  // .header.is-scrolled
  &.is-scrolled {
    border-color: #e2e2e3;
    background: var(--color-body);
  }
}

.header__appearance-item[data-theme-set="light"] {
  display: none;
}

.header__appearance-item[data-theme-set="dark"] {
  display: inline-flex;
}

:root[data-theme="dark"] {
  .header.is-scrolled {
    border-color: #000;
  }

  .header__appearance-item[data-theme-set="light"] {
    display: inline-flex;
  }

  .header__appearance-item[data-theme-set="dark"] {
    display: none;
  }
}
