//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@use "../form";
@use "../../config" as *;
@use "../../motion" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/placeholder-colors" as *;
@use "../../utilities/read-only" as *;
@use "../../utilities/skeleton" as *;

/// Text area styles
/// @access public
/// @group text-area

$input-border: 1px solid var(--neutral-100__color) !default; //TODO change to current token $field-border
$input-border-radius: 0px !default;
$input-height: 40px !default;

@mixin text-area {
  .#{$prefix}--text-area {
    @include reset;
    @include font-family("sans");
    @include type-style("body-long-01");
    //TODO: check why min-width was used
    //min-width: 10rem;
    // width: 100%; //Commented due to the prop fullWidth that adds class .#{$prefix}--textarea-fullwidth
    // min-width: 10rem;
    height: 100%;
    min-height: $input-height;
    padding: $spacing-03;
    background-color: $fill-field;
    color: $text-body-default;
    appearance: none;
    border: $input-border;
    border-radius: $input-border-radius;
    order: 2;
    resize: vertical;
    transition: background-color $duration-fast-01 motion(standard, productive),
      outline $duration-fast-01 motion(standard, productive);

    & ~ .#{$prefix}--label {
      order: 1;
    }

    &:focus {
      @include focus-outline("border");
      background: $fill-field;
      color: $text-body-default;
    }

    &::placeholder {
      @include placeholder-colors;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    &:disabled:hover {
      border: $input-border;
    }
    &:focus ~ .#{$prefix}--label {
      color: $action-default-fill-primary-default;
    }

    &[data-invalid]:focus + .#{$prefix}--label {
      color: $support-error-main; // TODO $text-error
    }

    &:read-only {
      @include read-only("border");
    }
  }

  .#{$prefix}--textarea-fullwidth {
    width: 100%;
  }

  /*.#{$prefix}--text-area--light {
    background: var(--field-02);
  }*/

  // Skeleton State
  #{$prefix}--text-area.#{$prefix}--skeleton {
    @include skeleton;
    height: calcRem(100px);

    &::-webkit-input-placeholder {
      color: transparent;
    }
  }

  // Skeleton State
  #{$prefix}--text-area.#{$prefix}--skeleton {
    @include skeleton;
    height: calcRem(100px);

    &::-webkit-input-placeholder {
      color: transparent;
    }
  }

  // Skeleton State
  #{$prefix}--text-area.#{$prefix}--skeleton {
    @include skeleton;
    height: calcRem(100px);

    &::-webkit-input-placeholder {
      color: transparent;
    }
  }
}