@import "settings.breakpoints";
@import "settings.colors";
@import "settings.vars";
@import "settings.z-index";

@import "mixins/tools.mixins";

@import "mixins/components.controls";
@import "mixins/settings.fonts";

///////////////////////////////////////////////////
// button themes
///////////////////////////////////////////////////
.c-control {
  @include c-control--default;
}

///////////////////////////////////////////////////
// grey theme (default)
///////////////////////////////////////////////////
.c-control--primary,
.c-control--grey-700 {
  @include c-control--grey-700;
}

.c-control--grey-700-border {
  @include c-control--grey-700-border;
}

.c-control--secondary,
.c-control--grey-800 {
  @include c-control--grey-800;
}

.c-control--grey-800-border {
  @include c-control--grey-800-border;
}

.c-control--grey-900 {
  @include c-control--grey-900;
}

.c-control--grey-900-border {
  @include c-control--grey-900-border;
}

///////////////////////////////////////////////////
// white and stone theme
///////////////////////////////////////////////////
.c-control--white {
  @include c-control--white;
  @include c-control--white-primary;
}

.c-control--white-border {
  @include c-control--white;
  @include c-control--white-primary-border;
}

.c-control--white-secondary {
  @include c-control--white;
  @include c-control--white-secondary;
}

.c-control--white-secondary-border {
  @include c-control--white;
  @include c-control--white-secondary-border;
}

///////////////////////////////////////////////////
// red theme
///////////////////////////////////////////////////
.c-control--red {
  @include c-control--red;
  @include c-control--red-primary;
}

.c-control--red-border {
  @include c-control--red;
  @include c-control--red-primary-border;
}

.c-control--red-secondary {
  @include c-control--red;
  @include c-control--red-secondary;
}

.c-control--red-secondary-border {
  @include c-control--red;
  @include c-control--red-secondary-border;
}

.c-control--red-text {
  @include c-control--red-text;
}

///////////////////////////////////////////////////
// modifiers
///////////////////////////////////////////////////
.c-control--panel {
  @include c-control--panel;
}

.c-control--icononly {
  width: rem(50);
}

.c-control--menu-button {
  @include c-control--grey-700;
  display: flex;
  z-index: $z-index-focused-menu-button;
  width: rem(50);
  height: rem(50);
}

.c-control--search-button {
  z-index: $z-index-focused-search-button;
}

.c-control--social {
  padding: 0;
  width: rem(44);
  height: rem(44);
}

.c-control--login {
  .c-control__button {
    .c-control__icon {
      width: rem(12);
      height: rem(12);
    }
  }
}

///////////////////////////////////////////////////
// close buttons
///////////////////////////////////////////////////
.c-control--close {
  @include c-control--grey-800;
  position: absolute;
  width: auto;
  bottom: rem(55);
  z-index: $z-index-panel-close-button;
  padding: 0;
  right: 0;

  .c-control__button {
    z-index: 150;
    width: $c-control-button-size-inner;
    margin: 0;
  }
}

.c-control--close-top {
  top: 0;
  right: rem(30);
}

.c-control--close-bottom {
  bottom: 0;
  right: rem(30);
}

///////////////////////////////////////////////////
// inactive buttons
///////////////////////////////////////////////////
.c-control--disabled,
.c-control--arrow--disabled {
  &.c-control--disabled {
    @include c-control--disabled;
  }
}

.c-control--white,
.c-control--white-border,
.c-control--white-secondary,
.c-control--white-secondary-border {
  &.c-control--disabled {
    @include c-control--disabled-white;
  }
}

.c-control--red,
.c-control--red-border,
.c-control--red-secondary,
.c-control--red-secondary-border {
  &.c-control--disabled {
    @include c-control--disabled-red;
  }
}

///////////////////////////////////////////////////
// arrow buttons
///////////////////////////////////////////////////
.c-control--arrow {
  display: flex;
  transition: 0.4s ease-out;
}

.c-control--arrow--left {
  border-left: 1px solid $color-grey-500;
  border-right: 1px solid $color-grey-500;

  &.c-control--white {
    border-left: 1px solid $color-stone-150;
    border-right: 1px solid $color-stone-150;
  }
}

.c-control--arrow--right {
  border-left: 1px solid $color-grey-500;
  border-right: 1px solid $color-grey-500;

  &.c-control--white {
    border-left: 1px solid $color-stone-150;
    border-right: 1px solid $color-stone-150;
  }
}

.c-control--autowidth {
  min-width: $c-control-button-size-inner;
  width: 100%;
}

///////////////////////////////////////////////////
// default button
///////////////////////////////////////////////////
.c-control__button {
  @include c-control--button-default;
}

///////////////////////////////////////////////////
// default label
///////////////////////////////////////////////////
.c-control__label {
  @include c-control--button-label;
}

///////////////////////////////////////////////////
// default icon
///////////////////////////////////////////////////
.c-control__icon {
  @include c-control--button-icon;
}

///////////////////////////////////////////////////
// namedspaced adchoice button label
///////////////////////////////////////////////////
.c-control {
  .c-control__button {
    .c-control__label--adchoice {
      font-family: sans-serif;
      font-size: rem(10);
      color: $color-white;
      text-transform: none;
    }
  }
}

// if label is adjacent sibling to icon then add 4px margin-right to label (yuck)
.c-control__icon ~ .c-control__label {
  margin-left: rem(4);
}
