/**
 * Text input
 * @define text-input
 */

@use 'sass:map';
@use '@ecl/vanilla-layout-form/mixins';

// Exposed variables
$theme: null !default;
$text-input: null !default;

// Internal variables
$border-width: 1px;
$outline-width: 2px;

.ecl-text-input {
  appearance: none;
  background-color: map.get($theme, 'color', 'white');
  border: $border-width solid map.get($text-input, 'border-color');
  border-radius: map.get($text-input, 'radius');
  box-shadow: map.get($text-input, 'shadow');
  box-sizing: border-box;
  color: map.get($text-input, 'color-input');
  display: block;
  font: var(--f-ui-m);
  margin: 0;
  height: 2.75rem;
  max-width: 100%;
  padding: calc(#{map.get($text-input, 'padding-vertical')} - #{$border-width})
    calc(#{map.get($text-input, 'padding-horizontal')} - #{$border-width});

  &::placeholder {
    color: map.get($text-input, 'color-placeholder');
    font: var(--f-ui-m);
    opacity: 1;
  }

  &:hover {
    border-color: map.get($text-input, 'border-color-hover');
    box-shadow: map.get($text-input, 'shadow-hover');
  }

  &:focus-visible,
  &:active {
    box-shadow: map.get($text-input, 'shadow-hover');
    outline: $outline-width solid var(--c-p);
    outline-offset: -#{$outline-width};
  }
}

.ecl-text-input[disabled],
.ecl-text-input--disabled,
.ecl-text-input[readonly],
.ecl-text-input--readonly {
  background-color: map.get($theme, 'color', 'white');
  cursor: not-allowed;
  opacity: 0.5;
}

.ecl-text-input--invalid {
  border-color: map.get($text-input, 'border-color-invalid');

  &:active,
  &:hover {
    border-color: map.get($text-input, 'border-color-invalid-hover');
  }

  &:focus-visible {
    border-color: map.get($text-input, 'border-color-focus');
  }
}

.ecl-text-input--s {
  @include mixins.form-width(s);
}

.ecl-text-input--m {
  @include mixins.form-width(m);
}

.ecl-text-input--l {
  @include mixins.form-width(l);
}
