@use "./variables" as *;

.#{$component-prefix}input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  min-width: 0; // for flex-shrink in field__button
  height: $input-height;
  padding: 0;
  margin: 0;
  font-size: $input-font-size;
  line-height: $input-line-height;
  color: $input-color;
  resize: none;
  background-color: transparent;
  border: 0;
  outline: none;

  // for ios wechat
  &[type='date'],
  &[type='time'],
  &[type='datetime-local'] {
    min-height: var(--cell-line-height, $cell-line-height);
  }

  // for safari
  &[type='search'] {
    appearance: none;
  }

  &__placeholder {
    color: $input-placeholder-color;
  }

  &--disabled {
    color: $input-disabled-color;
    cursor: not-allowed;
    opacity: 1;
    // fix disabled color in mobile safari
    -webkit-text-fill-color: $input-disabled-color;
  }

  &--readonly  {
    color: $input-color;
    cursor: default;
    opacity: 1;
  }

  &--primary,
  &__placeholder--primary {
    color: $input-primary-color;
  }

  &--info,
  &__placeholder--info {
    color: $input-info-color;
  }

  &--success,
  &__placeholder--success {
    color: $input-success-color;
  }

  &--warning,
  &__placeholder--warning {
    color: $input-warning-color;
  }

  &--danger,
  &__placeholder--danger {
    color: $input-danger-color;
  }

  &--left {
    justify-content: flex-start;
    text-align: left;
  }

  &--center {
    justify-content: center;
    text-align: center;
  }

  &--right {
    justify-content: flex-end;
    text-align: right;
  }

  &__clear {
    flex-shrink: 0;
    padding: 0 var(--padding-xs, $padding-xs);
    margin-right: calc(var(--padding-xs, #{$padding-xs}) * -1);
    font-size: $input-clear-icon-size;
    line-height: inherit;
    color: $input-clear-icon-color;
    cursor: pointer;
  }
}