@use 'sass:math';

.md-search-input-wrapper {
  position: relative;
  border-radius: 0.5rem;
  background-color: var(--mds-color-theme-background-solid-primary-normal);
  border: 0.0625rem solid var(--mds-color-theme-outline-input-normal);
  box-sizing: border-box;
  height: 2rem;
  width: 16.25rem;
  display: flex;
  align-items: center;

  &[data-focus='true'] {
    box-shadow: var(--md-globals-focus-ring-box-shadow);
  }

  &[data-height='28'] {
    height: 1.75rem;
  }

  &:hover {
    background-color: var(--mds-color-theme-background-primary-hover);
  }

  &[data-disabled='true'] {
    background-color: var(--mds-color-theme-background-primary-disabled);
    border-color: var(--mds-color-theme-background-primary-disabled);

    input {
      color: var(--mds-color-theme-text-primary-disabled);
    }

    .search-icon {
      color: var(--mds-color-theme-text-primary-disabled);
    }
  }

  .md-search-input-container {
    position: relative;
    display: flex;
    flex-grow: 1;
  }

  input {
    border: 0;
    background-color: transparent;
    box-shadow: none;
    color: var(--mds-color-theme-text-primary-normal);
    font-size: 0.875rem;
    display: inline-block;
    flex: 1;

    // remove focus from input since focus ring is applied to parent div (md-search-input-wrapper)
    &:focus {
      background-color: transparent;
      outline: none;
      box-shadow: none;
    }

    &:focus-visible {
      outline: none;
    }

    &::placeholder {
      color: var(--mds-color-theme-text-secondary-normal);
      opacity: 1;
    }

    &::selection {
      color: var(--mds-color-theme-inverted-text-primary-normal);
      background-color: var(--mds-color-theme-background-accent-active);
    }
  }

  .md-search-input-search,
  .md-search-input-searching {
    margin-left: 0.375rem;
    margin-right: 0.375rem;
  }

  .md-search-input-clear {
    border: 0;
    padding: 0;
    margin-right: 0.5rem;
    background-color: transparent;
    cursor: pointer;
    color: var(--mds-color-theme-text-primary-normal);

    &:active {
      color: var(--mds-color-theme-text-primary-normal);
    }
  }

  ::-webkit-search-cancel-button {
    -webkit-appearance: none;
    pointer-events: none;
  }
}