@import "styles/_variables";
@import "styles/mixins";

.input {
  &-wrapper {
    display: flex;
    flex-flow: column;

    & > * + * {
      margin-top: 7px;
    }
  }

  box-sizing: border-box;
  min-width: 200px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--color-input);
  background-color: var(--background-card);
  border: 1px solid var(--border-active);
  border-radius: 4px;

  @include sm-down {
    width: 100% !important;
  }

  &-with-icon {
    padding: 6px 12px 6px 34px;
  }

  &::placeholder {
    font-size: 14px;
    line-height: 22px;
    color: var(--color-placeholder);
    letter-spacing: -0.00928571px;
  }

  &:focus {
    outline: none;
  }

  &:not(:read-only):focus {
    border-color: var(--border-focus);
  }

  &:read-only {
    font-style: italic;
    color: var(--color-placeholder);
    cursor: not-allowed;
    user-select: none;
    background: rgba(143, 144, 166, 0.1);
  }

  &-inner {
    position: relative;

    .icon {
      position: absolute;
      top: 50%;
      left: 12px;
      width: 14px;
      height: 14px;
      transform: translateY(-50%);

      &-search {
        path {
          stroke: #4f5162;
        }
      }
    }
  }
}
