@import "settings.colors";

@import "mixins/tools.mixins";

.c-search-box {
  // The following selector is nested because this element is also a
  // c-button, and we need these styles to override the ones defined in
  // _components.button.scss, even if that file is imported after this one
  // (nested selectors have higher specificity).
  //
  // Alternatively, instead of nesting the selector, we could employ a hack
  // where we chain the same selector to itself, which would also increase the
  // specificity: .c-search-box__button.c-search-box__button {}
  //
  // We could have used a .c-button selector here, but instead we've given the
  // c-button element an additional class that's scoped to the c-search-box
  // component, because ideally we want to keep all .c-button selectors
  // isolated within a single file (_components.button.scss). This makes
  // our CSS more modular and easier to reason about and debug.
  .c-search-box__button {
    width: rem(44);
    height: rem(44);
    border-left: none;
  }
}
.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;
    border-color: $color-grey-300;
    color: $color-white;
  }
}

// TODO: Refactor this (see templates/search-box.hbs)
//
// .c-search-box {
//   .c-form__field {
//     display: flex;
//     flex-wrap: wrap;
//   }
//   .c-form__control--text {
//     border-right: none;
//     flex: 1;
//   }
// }
