@use "../../../styles/int.scss";

.container {
  --SearchInput-popup-bg: white;
  --SearchInput-focus-bg: #{int.$warmgray-10};
  --SearchInput-focus-fg-inverse: black;

  position: relative;
}

@include int.customize-component(".container") {
  .int-style.int-style-Button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .int-style.int-style-Button__icon {
    margin: 0;
  }
}

.input-container {
  position: relative;
  width: 100%;
}

.controls {
  width: 100%;
  display: flex;
  flex-flow: row;
}

.clear-button {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
}

.label {
  @include int.overline() {
    font-weight: 400
  };
}