@use '@justeattakeaway/pie-css/scss' as p;

:host {
  display: block;
}

// Heights are being defined based on the line height of the text and the padding.
// Some of the padding is in the wrapper element to properly position the textarea resize handle.
// Changing the `size` property affects the padding and therefore the height of the textarea.
// Default height is two lines of text.
// Minimum height in manual resize mode is one line of text.
// Maximum height in auto resize mode is six lines of text.
.c-textareaWrapper {
  --textarea-line-height: #{p.line-height(--dt-font-body-l-line-height)};
  --textarea-border-thickness: 1px;
  --textarea-resize: none;
  --textarea-padding-inline: var(--dt-spacing-c);
  --textarea-padding-block: var(--dt-spacing-b);
  --textarea-background-color: var(--dt-color-container-default);
  --textarea-border-color: var(--dt-color-border-form);
  --textarea-content-color: var(--dt-color-content-default);
  --textarea-placeholder-color: var(--dt-color-content-placeholder);

  // Default height is two lines of text
  --textarea-height: calc((var(--textarea-line-height) * 2) + (var(--textarea-padding-block) * 2));

  line-height: 0;
  padding: var(--dt-spacing-a);
  border: var(--textarea-border-thickness) solid var(--textarea-border-color);
  background-color: var(--textarea-background-color);
  border-radius: var(--dt-radius-rounded-c);
  inline-size: 100%;

  textarea {
    @include p.font-size(--dt-font-body-l-size);
    line-height: var(--textarea-line-height);
    font-family: var(--dt-font-body-l-family);
    resize: var(--textarea-resize);
    border: none;
    background-color: var(--textarea-background-color);
    color: var(--textarea-content-color);

    block-size: var(--textarea-height);
    max-block-size: var(--textarea-max-height);
    min-block-size: var(--textarea-min-height);
    inline-size: 100%;

    padding-block-start: var(--textarea-padding-block);
    padding-block-end: var(--textarea-padding-block);
    padding-inline-start: var(--textarea-padding-inline);
    padding-inline-end: var(--textarea-padding-inline);

    &:focus {
      box-shadow: none;
      outline: none;
    }

    &::placeholder {
      color: var(--textarea-placeholder-color);

      opacity: 1; // normalize opacity for all browsers
    }
  }

  &.is-readonly {
    --textarea-background-color: var(--dt-color-container-subtle);
    --textarea-border-color: var(--dt-color-border-form);
  }

  &.is-disabled {
    --textarea-background-color: var(--dt-color-disabled-01);
    --textarea-border-color: var(--dt-color-disabled-01);
    --textarea-content-color: var(--dt-color-content-disabled);
    --textarea-placeholder-color: var(--dt-color-content-disabled);
  }

  @media (hover: hover) {
    &:hover:not(.is-disabled, .is-readonly) {
      --textarea-background-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) + calc(-1 * var(--dt-color-hover-01))));

      @supports (background-color: color-mix(in srgb, black, white)) {
        --textarea-background-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01),  var(--dt-color-container-default));
      }
    }
  }

  &:focus-within {
    @include p.focus;
  }

  &.c-textarea--large {
    --textarea-padding-block: var(--dt-spacing-c);
  }

  &.c-textarea--small {
    --textarea-padding-block: var(--dt-spacing-a);
  }

  &.c-textarea--resize-manual {
    --textarea-resize: vertical;
    --textarea-height: auto;

    // Minimum is one line of text
    --textarea-min-height: calc((var(--textarea-line-height) * 1) + (var(--textarea-padding-block) * 2));

    @media (pointer: coarse) {
      // Fixed size for touch devices
      --textarea-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));
      --textarea-min-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));
      --textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));
      --textarea-resize: none;
    }
  }

  &.c-textarea--resize-auto {
    // Maximum is six lines of text
    --textarea-max-height: calc((var(--textarea-line-height) * 6) + (var(--textarea-padding-block) * 2));

    // Minimum is two lines of text
    --textarea-min-height: var(--textarea-height);
  }

  &.c-textarea--resize-none {
    --textarea-height: auto;
  }

  &.has-error {
    --textarea-border-color: var(--dt-color-support-error);
  }
}