.wrapper {
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--color-border-1);
  color: var(--color-text-1);
  background-color: var(--color-bg-0);
  cursor: text;

  &:focus-within {
    border: 1px solid var(--color-primary);

    .clear {
      visibility: visible;
    }
  }

  &.disabled {
    color: var(--color-disabled-text);
    /* safari bug: https://stackoverflow.com/a/4648315 */
    -webkit-text-fill-color: var(--color-disabled-text);
    border: 1px solid var(--color-disabled-border);
    background-color: var(--color-disabled-bg);
    cursor: not-allowed;
  }

  &:invalid,
  &.invalid {
    border: 1px solid var(--color-border-error);
  }

  &:not(.disabled, .invalid, .readOnly):hover {
    border: 1px solid var(--color-primary);

    /* https://gist.github.com/PocketNinjaDesign/689e16e412a88dfd36dd08b26bebcacf */
    @media (hover: hover) {
      .clear {
        visibility: visible;
      }
    }
  }
}

.input {
  width: 100%;
  height: 100%;
  padding: 0 8px;
  color: var(--color-text-1);
  font-size: var(--font-size-lg);
  text-overflow: ellipsis;

  &:disabled {
    color: var(--color-disabled-text);
    cursor: not-allowed;
  }

  &:focus {
    outline: none;
  }

  &:read-only {
    user-select: none;
  }

  &::placeholder {
    color: var(--color-text-4);
  }
}

.prefix,
.suffix {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (hover: hover) {
  .clear {
    visibility: hidden;
  }
}

.button {
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: var(--color-text-1);

  &:focus-visible {
    outline: 1px solid var(--color-primary);
    outline-offset: 1px;
  }

  &:disabled {
    cursor: not-allowed;
  }
}
