@use "../../../1-settings/settings-index";
@use "../../../1-settings/class-vars";
@use "../../../1-settings/spacing";


#{class-vars.$base-class} {
  .search-modal {
    form.search-modal__form {
      position: fixed;
      top: 40vh;
      z-index: 4010;
    }
    &__input[type=text] {
      border-radius: var(--radius-circle);
      border: none;
      width: 50vw;
      padding: var(--spacing) 170px var(--spacing) var(--spacing-3xl);
      font-size: var(--font-size-l);
      margin: 0;
    }
    &__button-wrapper {
      position: absolute;
      right: var(--spacing-s)

    }
    &__close-button-wrapper {
      position: fixed;
      top: var(--spacing);
      right: var(--spacing);
      z-index: 4010;
    }
    &__close-button {
      & [class*=utds-icon-before-]::before {
        font-size: 1rem;
        color: white;
      }
      &:hover {
        background: white;
        & [class*=utds-icon-before-]::before {
          color: var(--gray-color);
        }
      }
    }
    &__icon-search {
      position: absolute;
      top: calc(50% + 2px);
      left: var(--spacing);
      &[class*=utds-icon-before-]::before {
        display: block;
        font-size: 1.3rem;
      }
    }
  }
}