@import "~@kaizen/design-tokens/sass/typography";

/* stylelint-disable selector-no-vendor-prefix */

$input-placeholder-line-height: 2.9rem;

@mixin form-input-placeholder() {
  &::-webkit-input-placeholder {
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
    font-weight: $typography-paragraph-body-font-weight;
    line-height: $typography-paragraph-body-line-height;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    position: static;
    @content;
  }

  &:-moz-placeholder {
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
    font-weight: $typography-paragraph-body-font-weight;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    position: static;
    line-height: $input-placeholder-line-height;
    @content;
  }

  &::-moz-placeholder {
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
    font-weight: $typography-paragraph-body-font-weight;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    position: static;
    line-height: $input-placeholder-line-height;
    @content;
  }

  &:-ms-input-placeholder {
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-paragraph-body-font-size;
    font-weight: $typography-paragraph-body-font-weight;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    position: static;
    line-height: $input-placeholder-line-height;
    @content;
  }
}

@mixin form-input-focus-state {
  &:focus:not([disabled]),
  &:hover:not([disabled]),
  &:hover:focus:not([disabled]) {
    @content;
  }
}

// Simple form input css reset
@mixin form-input-reset() {
  outline: 0;
  box-sizing: border-box;
  font-family: $typography-paragraph-body-font-family;
  font-size: $typography-paragraph-body-font-size;
  font-weight: $typography-paragraph-body-font-weight;
  line-height: $typography-paragraph-body-line-height;
  letter-spacing: $typography-paragraph-body-letter-spacing;
  position: static;
}

/* stylelint-enable selector-no-vendor-prefix */