@use "sass:meta";
@use "../../lib/mixin";
@use "../../settings";

/*
#{settings.$prefix}-input

The input unit.

Weight: -1030

Style guide: #{settings.$prefix}-input
*/

/*
Core

The core module.

Weight: -100

Style guide: #{settings.$prefix}-input.core
*/

/*
Default style

The default style.

Weight: -100

Markup: <!-- input -->
<input class="#{settings.$prefix}-input" type="text" name="{{modifier_class}}" value="" placeholder="Lorem ipsum dolor sit amet." />
<!-- input:disabled -->
<input class="#{settings.$prefix}-input" type="text" name="{{modifier_class}}" value="" placeholder="あのイーハトーヴォのすきとおった風。" disabled="disabled" />
<!-- textarea -->
<textarea class="#{settings.$prefix}-input" name="{{modifier_class}}" rows="5" cols="10" placeholder="Lorem ipsum dolor sit amet."></textarea>

Style guide: #{settings.$prefix}-input.core.default
*/
.#{settings.$prefix}-input {
  $pkg: settings.$pkg;

  --resize: none;
  --box-sizing: border-box;
  --width: 100%;
  --font-size: var(--#{$pkg}-font-size);
  --font-weight: var(--#{$pkg}-font-weight);
  --font-style: normal;
  --line-height: normal;
  --text-align: left;
  --text-decoration: none;
  --text-indent: 0;
  --letter-spacing: var(--#{$pkg}-letter-spacing);
  --vertical-align: baseline;
  --appearance: none;
  --outline: 0;

  resize: var(--resize);

  font-size: var(--font-size);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  line-height: var(--line-height);
  text-align: var(--text-align);
  text-decoration: var(--text-decoration);
  text-indent: var(--text-indent);
  letter-spacing: var(--letter-spacing);
  vertical-align: var(--vertical-align);

  appearance: var(--appearance);
  outline: var(--outline);

  @include mixin.on-disabled() {
    --opacity: 0.5;
  }

  &:where(textarea) {
    // restrict to only vertical resizing
    // + ie, edge, ios and android are not supported
    --resize: vertical;
    --line-height: var(--#{$pkg}-line-height);
  }
}