@import "settings.colors";

@import "mixins/tools.mixins";
@import "mixins/components.button";

.c-search-box {
  .c-button {
    border-left: none;
  }
}
.c-search-box--dark {
  .c-button {
    @include c-button-theme($color-grey-700);
  }
}
.c-search-box__label {
  @include font-gm-sans-bold;
  color: $color-grey-660;
  font-size: rem(12);
  text-transform: uppercase;
  letter-spacing: rem(1);
  padding: 0 0 rem(10) 0;
  display: inline-block;
  .c-search-box--dark & {
    color: $color-white;
  }
}
.c-search-box__controls {
  display: flex;
  flex-wrap: wrap;
}
.c-search-box__input {
  @include font-gm-sans;
  appearance: none;
  border-radius: 0;
  background-color: $color-white;
  border: 1px solid $color-stone-500;
  color: $color-grey-660;
  font-size: rem(16);
  height: rem(44);
  padding: rem(10);
  flex: 1;
  letter-spacing: rem(0.5);
  .c-search-box--dark & {
    background-color: $color-grey-700;
    color: $color-white;
  }
}
