/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */

@import "~@utrecht/focus-ring-css/src/mixin";

$utrecht-support-prince-xml: false !default;

/* TODO: Enable ordering properties when the plugin supports logical CSS properties
 * https://github.com/hudochenkov/stylelint-order/pull/162 */
/* stylelint-disable order/properties-alphabetical-order */
@mixin utrecht-textarea {
  /* Fall back to `resize: vertical` for browsers that don't support `resize: block` */
  background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color));
  block-size: initial; /* harden */
  border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width));
  border-block-end-width: var(
    --utrecht-textarea-border-block-end-width,
    var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
  );
  border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color));
  border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0));
  border-style: solid;
  box-sizing: border-box;
  color: var(--utrecht-textarea-color, var(--utrecht-form-control-color));
  font-family: var(--utrecht-textarea-font-family, var(--utrecht-form-control-font-family));
  font-size: var(--utrecht-textarea-font-size, var(--utrecht-form-control-font-size, inherit));
  font-weight: var(
    --utrecht-textarea-font-weight,
    var(--utrecht-form-control-font-weight, initial)
  ); /* harden with `initial` */

  inline-size: 100%;
  line-height: var(--utrecht-textarea-line-height, initial);
  max-inline-size: var(--utrecht-textarea-max-inline-size, var(--utrecht-form-control-max-inline-size));
  min-block-size: var(--utrecht-textarea-min-block-size, var(--utrecht-pointer-target-min-size, 44px));
  min-inline-size: var(--utrecht-pointer-target-min-size, 44px);
  padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0));
  padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
  padding-inline-end: var(
    --utrecht-textarea-padding-inline-end,
    var(--utrecht-form-control-padding-inline-end, initial)
  );
  padding-inline-start: var(
    --utrecht-textarea-padding-inline-start,
    var(--utrecht-form-control-padding-inline-start, initial)
  );
  resize: vertical;
  resize: block;

  @if $utrecht-support-prince-xml {
    @media print {
      & {
        -prince-pdf-form: enable;
        border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)) !important;
        border-block-end-width: auto !important;
        border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)) !important;
        inline-size: 100%;
      }
    }
  }
}

@mixin utrecht-textarea--invalid {
  --_utrecht-textarea-border-width: var(
    --utrecht-textarea-invalid-border-width,
    var(
      --utrecht-form-control-invalid-border-width,
      var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))
    )
  );

  background-color: var(
    --utrecht-textarea-invalid-background-color,
    var(
      --utrecht-form-control-invalid-background-color,
      var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))
    )
  );
  border-width: var(--_utrecht-textarea-border-width);
  border-block-end-width: var(
    --utrecht-textarea-invalid-border-block-end-width,
    var(
      --utrecht-form-control-invalid-border-block-end-width,
      var(
        --utrecht-textarea-border-block-end-width,
        var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width))
      )
    )
  );
  border-color: var(
    --utrecht-textarea-invalid-border-color,
    var(
      --utrecht-form-control-invalid-border-color,
      var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))
    )
  );
  color: var(
    --utrecht-textarea-invalid-color,
    var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))
  );
}

@mixin utrecht-textarea--disabled {
  background-color: var(
    --utrecht-textarea-disabled-background-color,
    var(
      --utrecht-form-control-disabled-background-color,
      var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))
    )
  );
  border-color: var(
    --utrecht-textarea-disabled-border-color,
    var(
      --utrecht-form-control-disabled-border-color,
      var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))
    )
  );
  color: var(
    --utrecht-textarea-disabled-color,
    var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))
  );
  cursor: var(--utrecht-action-disabled-cursor, not-allowed);
}

@mixin utrecht-textarea--focus {
  @include utrecht-focus;

  background-color: var(
    --utrecht-textarea-focus-background-color,
    var(
      --utrecht-form-control-focus-background-color,
      var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))
    )
  );
  border-color: var(
    --utrecht-textarea-focus-border-color,
    var(
      --utrecht-form-control-focus-border-color,
      var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))
    )
  );
  color: var(
    --utrecht-textarea-focus-color,
    var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))
  );
}

@mixin utrecht-textarea--focus-visible {
  @include utrecht-focus-visible;
}

@mixin utrecht-textarea--read-only {
  background-color: var(
    --utrecht-textarea-read-only-border,
    var(
      --utrecht-form-control-read-only-background-color,
      var(--utrecht-textarea-border, var(--utrecht-form-control-background-color))
    )
  );
  border-color: var(
    --utrecht-textarea-read-only-border,
    var(
      --utrecht-form-control-read-only-border-color,
      var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))
    )
  );
  color: var(
    --utrecht-textarea-read-only-color,
    var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))
  );
}

@mixin utrecht-textarea__placeholder {
  color: var(
    --utrecht-textarea-placeholder-color,
    var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))
  );
  font-style: var(--utrecht-form-control-placeholder-font-style);
  opacity: 100%;
}

@mixin utrecht-textarea--html-textarea {
  &:focus {
    @include utrecht-textarea--focus;
  }

  &:focus-visible {
    @include utrecht-textarea--focus-visible;
  }

  &:invalid,
  &[aria-invalid="true"] {
    @include utrecht-textarea--invalid;
  }

  /* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
  &:read-only {
    @include utrecht-textarea--read-only;
  }

  /*
   * The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
   *
   * We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
   */
  &:disabled {
    @include utrecht-textarea--disabled;
  }

  &::placeholder {
    @include utrecht-textarea__placeholder;
  }
}