@import '~@palmetto/palmetto-design-tokens/build/scss/variables-size';

@mixin size-sm {
  border-radius: var(
    --form-control-size-sm-border-radius,
    var(--INTERNAL_form-control-size-sm-border-radius)
  );
  font-size: var(
    --form-control-size-sm-font-size,
    var(--INTERNAL_form-control-size-sm-font-size)
  );

  > textarea {
    padding: var(
      --form-control-size-sm-padding,
      var(--INTERNAL_form-control-size-sm-padding)
    );
    border-radius: var(
      --form-control-size-sm-border-radius,
      var(--INTERNAL_form-control-size-sm-border-radius)
    );
  }
}

%size-sm {
  @include size-sm;
}

.size-sm {
  @extend %size-sm;
}

@mixin size-md {
  border-radius: var(
    --form-control-size-md-border-radius,
    var(--INTERNAL_form-control-size-md-border-radius)
  );
  font-size: var(
    --form-control-size-md-font-size,
    var(--INTERNAL_form-control-size-md-font-size)
  );

  > textarea {
    padding: var(
      --form-control-size-md-padding,
      var(--INTERNAL_form-control-size-md-padding)
    );
    border-radius: var(
      --form-control-size-md-border-radius,
      var(--INTERNAL_form-control-size-md-border-radius)
    );
  }
}

%size-md {
  @include size-md;
}

.size-md {
  @extend %size-md;
}

@mixin size-lg {
  border-radius: var(
    --form-control-size-lg-border-radius,
    var(--INTERNAL_form-control-size-lg-border-radius)
  );
  font-size: var(
    --form-control-size-lg-font-size,
    var(--INTERNAL_form-control-size-lg-font-size)
  );

  > textarea {
    padding: var(
      --form-control-size-lg-padding,
      var(--INTERNAL_form-control-size-lg-padding)
    );
    border-radius: var(
      --form-control-size-lg-border-radius,
      var(--INTERNAL_form-control-size-lg-border-radius)
    );
  }
}

%size-lg {
  @include size-lg;
}

.size-lg {
  @extend %size-lg;
}

%disabled-base {
  background-color: var(
    --form-control-background-color-disabled,
    var(--color-background-form-control-disabled)
  );
  color: var(--form-control-font-color-disabled, var(--color-text-disabled));

  &:hover {
    cursor: not-allowed;
  }
}

.textarea-input-wrapper {
  font-family: var(--asset-fonts-body);

  > textarea {
    transition-duration: 300ms;
    transition-property: border, background-color;
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1);
    border: 1px solid var(--color-border-separator);
    box-shadow: 0 3px 0 rgb(0 0 0 / 5%);
    background-color: var(
      --form-control-background-color,
      var(--color-background-form-control)
    );
    width: 100%;
    line-height: var(--form-control-line-height, var(--size-line-height-input));
    color: var(--color-text-contrast);

    &::placeholder {
      opacity: 1;
      color: var(--color-text-placeholder);
    }

    &:focus {
      outline: none;
      border-color: var(
        --form-control-border-color-focus,
        var(--INTERNAL_form-control-border-color-focus)
      );
    }

    &:disabled {
      @extend %disabled-base;
    }
  }

  &.size-sm {
    @extend %size-sm;
  }

  &.size-md {
    @extend %size-md;
  }

  &.size-lg {
    @extend %size-lg;
  }

  @media (min-width: $size-breakpoint-tablet) {
    &.size-sm-tablet {
      @include size-sm;
    }

    &.size-md-tablet {
      @include size-md;
    }

    &.size-lg-tablet {
      @include size-lg;
    }
  }

  @media (min-width: $size-breakpoint-desktop) {
    &.size-sm-desktop {
      @include size-sm;
    }

    &.size-md-desktop {
      @include size-md;
    }

    &.size-lg-desktop {
      @include size-lg;
    }
  }

  @media (min-width: $size-breakpoint-hd) {
    &.size-sm-hd {
      @include size-sm;
    }

    &.size-md-hd {
      @include size-md;
    }

    &.size-lg-hd {
      @include size-lg;
    }
  }

  &.error {
    > textarea {
      border-color: var(
        --form-control-border-color-focus,
        var(--color-border-danger)
      );
      background-color: var(
        --form-control-border-color-focus,
        var(--color-background-form-control-error)
      );
    }

    textarea:focus {
      outline: none;
      background-color: transparent;
    }

    &:focus-within {
      background-color: var(--color-background-form-control);
      border-color: var(
        --form-control-border-color-focus,
        var(--INTERNAL_form-control-border-color-focus)
      );
    }
  }

  &:focus-within {
    outline: none;
    box-shadow: var(
        --form-control-box-shadow-focus,
        var(--INTERNAL_form-control-box-shadow-focus)
      ),
      inset 0 0 0 1px
        var(
          --form-control-border-color-focus,
          var(--INTERNAL_form-control-border-color-focus)
        );
  }
}

.textarea-input-label {
  margin-bottom: var(
    --form-control-label-margin,
    var(--INTERNAL_form-control-label-margin)
  );
}

.textarea-resize-both {
  resize: both;
}

.textarea-resize-horizontal {
  resize: horizontal;
}

.textarea-resize-vertical {
  resize: vertical;
}

.textarea-resize-none {
  resize: none;
}
