.header {
  width: 100%;
  height: var(--header-height);

  align-items: center;
  background-color: $lbry-white;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 1;

  html[data-mode='dark'] & {
    background-color: rgba($lbry-black, 0.9);
    color: $lbry-white;
  }
}

.header__navigation {
  display: flex;

  &:first-of-type {
    html[data-mode='dark'] & {
      border-color: $lbry-gray-5;
    }

    // Main navigation collapses into a menu button
    // at smaller screen widths

    @media (min-width: 601px) {
      width: 250px;
    }

    @media (max-width: 600px) {
      width: calc(var(--header-height) * 3 + 1px);
    }
  }
}

.header__navigation-item {
  height: var(--header-height);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;

  &:not(:disabled):hover {
    background-color: $lbry-gray-1;

    html[data-mode='dark'] & {
      background-color: $lbry-gray-5;
    }
  }

  &:disabled {
    opacity: 0.3;
  }
}

.header__navigation-item--back {
  html[data-mode='dark'] & {
    svg {
      stroke: $lbry-white;
    }
  }
}

.header__navigation-item--forward {
  html[data-mode='dark'] & {
    svg {
      stroke: $lbry-white;
    }
  }
}

.header__navigation-item--home {
  html[data-mode='dark'] & {
    svg {
      stroke: $lbry-white;
    }
  }
}

.header__navigation-item--menu {
  html[data-mode='dark'] & {
    svg {
      stroke: $lbry-white;
    }
  }

  // This menu button does not need to be seen
  // at larger screen widths

  @media (min-width: 601px) {
    display: none;
  }
}
.header__navigation-item--back,
.header__navigation-item--forward,
.header__navigation-item--home,
.header__navigation-item--menu {
  width: var(--header-height);
}

// Currently not used
// .header__navigation-item--publish,
// .header__navigation-item--wallet {
//   // Publish and Wallet links are collapsed
//   // into a menu at smaller screen widths
//
//   @media (max-width: 600px) {
//     display: none;
//   }
// }

// Publish button
.header__navigation-item--right-action {
  display: flex;
  justify-content: center;
  position: relative;

  .button__content {
    display: flex;
    padding: 0 var(--spacing-vertical-large);
  }

  .button__label {
    line-height: 1.4;
    padding-left: 0.5rem;
  }

  svg {
    top: 0.1em;
  }

  &:not(:last-child) {
    border-right: 1px solid $lbry-gray-1;
  }

  html[data-mode='dark'] & {
    svg {
      stroke: $lbry-white;
    }
  }
}

.header__navigation-item--wallet {
  border-right: 1px solid $lbry-gray-1;
  width: calc(100% - (var(--header-height) * 3));

  html[data-mode='dark'] & {
    border-color: $lbry-gray-5;
  }

  .button__content {
    line-height: var(--header-height);
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    width: 100%;
  }
}