@use "sass:map";
@use "sass:math";

// Search form Spacers
$search-spacers: (
  "icon-spacer-left": map.get($spacers, 3),
  "icon-spacer-top": math.div(($form-select-height - map.get($icon, "xs")), 2),
  "icon-spacer-top-md": math.div(
      ($form-select-height-md - map.get($icon, "xs")),
      2
    ),
  "submit-spacer-right": map.get($spacers, 3),
);

.bcl-search-form {
  .bcl-search-form__input {
    &[type="search"]::-webkit-search-cancel-button {
      width: 1rem;
      height: 1rem;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM5.35355 4.64645C5.15829 4.45118 4.84171 4.45118 4.64645 4.64645C4.45118 4.84171 4.45118 5.15829 4.64645 5.35355L7.29289 8L4.64645 10.6464C4.45118 10.8417 4.45118 11.1583 4.64645 11.3536C4.84171 11.5488 5.15829 11.5488 5.35355 11.3536L8 8.70711L10.6464 11.3536C10.8417 11.5488 11.1583 11.5488 11.3536 11.3536C11.5488 11.1583 11.5488 10.8417 11.3536 10.6464L8.70711 8L11.3536 5.35355C11.5488 5.15829 11.5488 4.84171 11.3536 4.64645C11.1583 4.45118 10.8417 4.45118 10.6464 4.64645L8 7.29289L5.35355 4.64645Z' fill='%236C757D'/%3E%3C/svg%3E");
      appearance: none;
    }
  }
  .bcl-search-form__group {
    position: relative;
  }
  &.rounded {
    .bcl-search-form__submit,
    .bcl-search-form__input {
      border-radius: 2rem;
    }
  }
  &.submittable {
    .bcl-search-form__input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .bcl-search-form__submit {
      padding-right: map.get($search-spacers, "submit-spacer-right");
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      &:focus-visible {
        outline-offset: 2px;
        outline-color: $primary;
      }
    }
    .bcl-search-form__group {
      display: flex;
    }
  }
  .form-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    visibility: visible;
    border: 0;
  }
  .bcl-search-form__icon {
    position: absolute;
    top: map.get($search-spacers, "icon-spacer-top");
    left: map.get($search-spacers, "icon-spacer-left");
  }
}

@include media-breakpoint-up(md) {
  .bcl-search-form {
    .bcl-search-form__icon {
      top: map.get($search-spacers, "icon-spacer-top-md");
    }
  }
}