@use "../../../styles/base/utilities.scss";

[data-fs-textarea] {
  // --------------------------------------------------------
  // Design Tokens for Textarea
  // --------------------------------------------------------

  // Default properties
  --fs-textarea-padding                                           : var(--fs-spacing-1) var(--fs-spacing-2);
  --fs-textarea-height                                            : calc(var(--fs-control-tap-size) * 3);

  --fs-textarea-bkg-color                                         : var(--fs-color-body-bkg);
  --fs-textarea-box-shadow                                        : none;
  --fs-textarea-box-shadow-hover                                  : 0 0 0 var(--fs-border-width) var(--fs-border-color-active);

  --fs-textarea-border-radius                                     : var(--fs-border-radius);
  --fs-textarea-border-width                                      : var(--fs-border-width);
  --fs-textarea-border-color                                      : var(--fs-border-color);
  --fs-textarea-border-color-hover                                : var(--fs-border-color-active);

  --fs-textarea-text-color                                        : var(--fs-color-text);
  --fs-textarea-text-size                                         : var(--fs-text-size-body);

  --fs-textarea-line-height                                       : 1.25;

  --fs-textarea-transition-function                               : var(--fs-transition-function);
  --fs-textarea-transition-property                               : var(--fs-transition-property);
  --fs-textarea-transition-timing                                 : var(--fs-transition-timing);

  // Disabled properties
  --fs-textarea-disabled-bkg-color                                : var(--fs-color-disabled-bkg);
  --fs-textarea-disabled-border-width                             : var(--fs-border-width);
  --fs-textarea-disabled-text-color                               : var(--fs-color-disabled-text);
  --fs-textarea-disabled-border-color                             : var(--fs-border-color);

  // --------------------------------------------------------
  // Structural Styles
  // --------------------------------------------------------

  width: 100%;
  height: var(--fs-textarea-height);
  padding: var(--fs-textarea-padding);
  font-size: var(--fs-textarea-text-size);
  line-height: var(--fs-textarea-line-height);
  color: var(--fs-textarea-text-color);
  background-color: var(--fs-textarea-bkg-color);
  border: var(--fs-textarea-border-width) solid var(--fs-textarea-border-color);
  border-radius: var(--fs-textarea-border-radius);
  box-shadow: var(--fs-textarea-box-shadow);
  transition:
    var(--fs-textarea-transition-property) var(--fs-textarea-transition-timing) var(--fs-textarea-transition-function),
    width 0s,
    height 0s;

  @include utilities.input-focus-ring;

  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
    border-color: var(--fs-textarea-border-color-hover);
    box-shadow: var(--fs-textarea-box-shadow-hover);
  }

  &:disabled {
    color: var(--fs-textarea-disabled-text-color);
    cursor: not-allowed;
    background-color: var(--fs-textarea-disabled-bkg-color);
    border: var(--fs-textarea-disabled-border-width) solid var(--fs-textarea-disabled-border-color);
  }

  // --------------------------------------------------------
  // Variants Styles
  // --------------------------------------------------------

  &[data-fs-textarea-resize="none"] {
    resize: none;
  }

  &[data-fs-textarea-resize="vertical"] {
    resize: vertical;
  }

  &[data-fs-textarea-resize="horizontal"] {
    resize: horizontal;
  }

  &[data-fs-textarea-resize="both"] {
    resize: both;
  }
}