$ds2FullSiteWidth: 1400px;
$headerBgColour: #1f1f1f;
$headerFgColour: #fff;
$headerFadedColour: #999;
$menuBottomBorderColour: #333;
/*
TODO
move above variable to somewhere not in this component
merge in new colours
replace colours with brand colour names
replace 16px etc with spacing values, are we creating new variables?
*/

.ds2-header {  
  background: $headerBgColour;
  color: $headerFgColour;

  .header--inner {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    max-width: $ds2FullSiteWidth;
    margin: auto;
    height: 80px;
    z-index: 3;
    padding: 0 16px;
  }

    .header--logo-container {
      height: 34px;
    }

      .header--logo {
        fill: $headerFgColour;
        height: 34px;
      }

  .header--right {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

    .header--link {
      text-decoration: none;
      font-size: 17px;
      cursor: pointer;
      color: $headerFgColour;
      padding: 12px 0;
      display: block;
      box-sizing: border-box;
    }

      .header--link__menu {
        display: none;
        padding: 4px 16px;

        @include media(">=uol-media-l") {
          display: block;
        }
      }

    .header--search {
      display: block;
      margin: 8px;
      fill: $headerFgColour;
      background: $headerBgColour;
      border: none;
    }

    .header--burger {
      background: none;
      width: 20px;
      cursor: pointer;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      padding: 16px;

      @include media(">=uol-media-l") {
        display: none;
      }

      div {
        display: block;
        height: 2px;
        width: 100%;
        margin: 3px 0;
        background: $headerFgColour;
      }
    }

  .header--dropdown-content {
    display: none;
    position: absolute;
    top: 80px;
    width: 100%;
    background-color: $headerBgColour;
    border-bottom: 1px solid $menuBottomBorderColour;
    z-index: 2;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: var(--dropdownContentWidth);
    left: 0;
  }

    .header--dropdown-inner {
      max-width: $ds2FullSiteWidth;
      margin: auto;
      position: relative;
      padding: 0 16px 48px;
      display: flex;
    }
  
    .header--title {
      font-size: 24px;
      color: $headerFgColour;
      padding: 12px 0;
    }

    .header--subtitle {
      font-size: 17px;
      color: $headerFadedColour;
      padding: 12px 0;
    }

    .header--menu-column {
      margin-right: 64px;
      width: 330px;
    }

    .header--menu-item__category::after {
      content: " \276F";
    }

    .header--sub-options {
      display: none;
    }

    .header--dropdown--search {
      fill: $headerFgColour;
      background: $headerBgColour;
      border: none;
    }

      .header--search-input {
        display: flex;
        align-items: center;
        padding: 12px 0 24px;
      }

      .header--input {
        border: none;
        background:$headerBgColour;
        color: $headerFgColour;
        font-size: 20px;
        padding-bottom: 8px;

        &:focus {
          outline: none;
        }
      }
}

#ds2-header--mask-site {
  width: 100%;
  z-index: 4;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.8), rgba(0,0,0,0));
  position: absolute;
}