@import "settings.breakpoints";
@import "settings.vars";

@import "mixins/base.focus";
@import "mixins/tools.functions";
@import "mixins/tools.mixins";

@import "mixins/components.controls";
@import "mixins/components.header";
@import "mixins/components.scroll-menu";

// placeholder
.c-header-placeholder--home {
  height: $c-header-height + $c-header-height--home;
}

.c-header-nav__container {
  .c-control--search-button {
    display: flex;
  }

  .c-control--menu-button {
    display: flex;
  }
}

.c-header-title--home {
  .c-control--search-button,
  .c-control--menu-button {
    display: none;
  }

  // centers vertically
  .c-header-title__button-containers {
    position: static;

    .c-control {
      // margin is 8 because there's already a padding of 2, so because of math, that makes it a total of 10
      margin: 0 rem(8) 0 0;

      &:last-child {
        margin: 0;
      }
    }
  }

  // only flex 1 and center for big logo on the home title
  .c-header-title__anchor {
    align-self: center;
  }
}

.c-header-nav--fixed {
  .c-header-nav__container {
    .c-control--menu-button {
      display: flex;
    }
  }
}

@include desktop-up {
  .c-header-title--home-red {
    background-color: $color-red-500;
    .c-header-title__anchor,
    .c-control__button {
      &:focus,
      &:hover:focus {
        @include focus-outline-inverted;
      }
    }
  }

  .c-header-title--home {
    @include c-header-logo-large;

    .c-header-title__container {
      height: $c-header-height--home;
    }

    .c-control--menu-button,
    .c-control--search-button {
      display: none;
    }
  }
}

@include desktop-down {
  // placeholder
  .c-header-placeholder--home {
    height: $c-header-height--home-medium;
  }

  .c-header-title--home {
    height: $c-header-height--tablet;

    .c-header-title__container {
      height: auto;
    }

    .c-control--subscribe {
      @include c-control--dark-text;
    }

    .c-control--register,
    .c-control--login,
    .c-control--search-button,
    .c-control--adchoice {
      @include c-control--grey-700;
    }

    .c-control--menu-button,
    .c-control--search-button {
      display: flex;
    }
  }

  .c-header-nav.c-header-nav--home {
    // header becomes dark and 60px height and the scroll menu becomes small
    top: rem(60);
    z-index: initial;
    @include c-scroll-menu-grey-800;

    // removes the arrows on the left and right
    @include c-scroll-menu-no-arrows;

    .c-control--menu-button,
    .c-control--search-button {
      display: none;
    }

    // show menu button in header-nav when scrolling
    &.c-header-nav--fixed {
      // makes the gradient on the left and right side of the scroll menu a dark grey (800) to match the background
      @include c-scroll-menu-pinned;

      .c-control--menu-button {
        display: flex;
      }
    }
  }
}

@include tablet-portrait-down {
  .c-header-title--home {
    .c-control--adchoice {
      @include adchoice-no-label;
    }
  }
}

@include mobile-only {
  .c-header-title--home {
    z-index: $z-index-header-title;

    .c-header-title__button-containers {
      .c-control {
        @include c-control--tight;
        @include c-control--short;
      }
    }
  }

  .c-header-title--home {
    .c-control--search-button,
    .c-control--register {
      display: none;
    }

    .c-control--adchoice {
      @include adchoice-small;
    }
  }

  .c-header-nav.c-header-nav--home {
    @include c-scroll-menu-grey-800;
    width: 100%;

    &.c-header-nav--fixed {
      @include c-scroll-menu-grey-800;
    }
  }
}

@include xs-mobile-only {
  .c-header-title--home {
    .c-header-title__button-containers {
      .c-control {
        @include c-control--xs;

        // hides 4th social button and makes sure that control is NOT adchoice button
        &:not(.c-control--adchoice) {
          // sass-lint:disable nesting-depth
          &:nth-child(4) {
            display: none;
          }
          // sass-lint:enable nesting-depth
        }
      }

      .c-control--adchoice {
        .c-control__button {
          padding: 0 rem(12);
        }
      }
    }
  }
}
