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

.input {
  padding: int.$spacing-2;
  width: 100%;
  border: 2px solid var(--SearchInput-border);

  @include int.element-focus-styles() {
    outline: 2px solid var(--SearchInput-border-focus);
  }

  &.dropdown {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  
  }

  &[aria-expanded="true"] {
    border-bottom-left-radius: 0;
  }
  
  &:hover {
    cursor: pointer;
  }

  &:hover {
    border: 2px solid var(--SearchInput-border-hover);
  }
}