@use 'scss/variables' as *;

.search-input-container {
  position: relative;
  display: flex;
  align-items: center;
  width: 250px;

  &.full-width {
    width: 100%;
  }

  .search-input-icon {
    position: absolute;
    left: 16px;
    font-size: 20px;
    pointer-events: none;

    @include themed {
      color: t($subColor);
    }
  }

  .search-input-field {
    width: 100%;
    height: 48px;
    padding: 0 16px 0 44px;
    font-size: 15px;
    outline: none;
    transition: 0.2s ease;

    @include themed {
      background: t($modal-sidebar);
      border: 1px solid t($modal-sidebarActive);
      border-radius: 24px;
      color: t($color);

      &:hover,
      &:focus {
        border-color: t($color);
      }

      &::placeholder {
        color: t($subColor);
      }
    }
  }
}
