@import '../settings';
@import '../colours';
@import '../mixins';

.header,
.hero-header {
  display: flex;
  align-items: center;
  align-content: center;
  color: $colour-sky-white;
  padding: 0.5em 1em;
  background: linear-gradient(
    45deg,
    $colour-sapphire-blue,
    rgba($colour-sapphire-blue, 0.7),
    $colour-sapphire-blue,
    $colour-sapphire-blue
  );

  & > * {
    // None of the children should grow or shrink
    // but the search bar (grow) and the primary links (shrink)
    flex: 0 0 auto;
  }

  .header__link {
    align-self: baseline;
  }

  &.header--negative,
  & .dropdown__content {
    justify-content: space-between;
    color: $colour-sapphire-blue;
    background: $colour-sky-white;

    a,
    button.button,
    a:link,
    a:visited,
    a:hover,
    a:active,
    .header__link > a {
      color: $colour-sapphire-blue;
    }

    .header__search button.button {
      color: $colour-sky-white;
    }
  }

  a,
  button.button,
  a:link,
  a:visited,
  a:hover,
  a:active,
  .header__link > a {
    display: inline-block;
    color: $colour-sky-white;
    margin-bottom: 0;
    transition:
      background-color 0.25s ease-out,
      color 0.25s ease-out;
  }

  &__navigation {
    flex-shrink: 1;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin: 0;
    padding: 0 0.5ch;
    gap: 0.5ch;

    // Hide the scroll bar in the header
    scrollbar-width: none;
    &::-webkit-scrollbar {
      display: none;
    }

    a,
    button.button {
      margin: 0.1rem 0.25rem;
      border-bottom: 1px solid transparent;

      &:hover {
        border-bottom-color: currentColor;
      }
    }

    // cancel the previous rule when inside a dropdown
    .dropdown {
      a,
      button.button {
        margin: 0;
        border-bottom: none;
      }
    }

    a,
    button.button {
      font-weight: bold;
      font-size: 1rem;
    }
  }

  &__secondary {
    text-align: right;
    padding-left: $global-padding * 0.5;
    line-height: 1;

    .header__navigation {
      overflow-x: initial;
    }

    small {
      white-space: nowrap;
    }
  }

  &__search {
    // Search bar is the only one growing or shrinking
    flex: 1;
    input,
    button {
      margin: 0;
    }
  }
}

.header {
  height: var(--top-header-margin);
}

.hero-header {
  @include box-shadow();
  flex-direction: column;
  height: 60vh;
  margin-bottom: 2em;

  & > * {
    width: 100%;
  }

  &__content {
    flex: 1;
    display: flex;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    h1 {
      color: $colour-sky-white;
    }
  }

  &__footer {
    flex: 0;
    text-align: center;
  }

  label {
    color: $colour-sky-white;
  }
}