@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-input-color: $ink-color-text !default;
$ink-input-font-size: $ink-font-size-md !default;
$ink-input-line-height: $ink-line-height-xl !default;
$ink-input-background-color: #ffffff !default;
$ink-input-disabled-color: $ink-color-text-disabled !default;

.ink-input {
  width: 100%;
  font-size: $ink-input-font-size;
  line-height: $ink-input-line-height;
  height: $ink-input-line-height;
  display: inline-block;
  background-color: $ink-input-background-color;
  padding: 0;
  margin: 0;
  color: $ink-input-color;
  box-sizing: border-box;
  border: none;

  &--h5 {
    &:focus,
    &:focus-visible,
    &:hover,
    &:active {
      border: none;
      outline: none;
    }
  }

  &--disabled {
    color: $ink-input-disabled-color;

    &.ink-input--h5 {
      &::-webkit-input-placeholder {
        color: $ink-input-disabled-color;
      }
    }
  }

  &__placeholder {
    &--disabled {
      color: $ink-input-disabled-color;
    }
  }
}