// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

/**
 * @summary Initialize textarea
 *
 * @name base
 * @selector .slds-textarea
 * @restrict textarea
 * @support dev-ready
 * @variant
 */
.slds-textarea {
  // stylelint-disable property-no-vendor-prefix
  -webkit-appearance: none; // // Scope to WebKit UA styling to remove unwanted inner-shadow
  // stylelint-enable property-no-vendor-prefix
  min-height: var(--slds-c-textarea-sizing-min-height, var(--slds-c-textarea-sizing-height-min, var(--sds-c-textarea-sizing-min-height)));
  width: 100%;
  padding-top: var(--slds-c-textarea-spacing-block-start, var(--slds-c-textarea-spacing-blockstart, var(--sds-c-textarea-spacing-block-start, $spacing-x-small)));
  padding-right: var(--slds-c-textarea-spacing-inline-end, var(--slds-c-textarea-spacing-inlineend, var(--sds-c-textarea-spacing-inline-end, $spacing-small)));
  padding-bottom: var(--slds-c-textarea-spacing-block-end, var(--slds-c-textarea-spacing-blockend, var(--sds-c-textarea-spacing-block-end, $spacing-x-small)));
  padding-left: var(--slds-c-textarea-spacing-inline-start, var(--slds-c-textarea-spacing-inlinestart, var(--sds-c-textarea-spacing-inline-start, $spacing-small)));
  background-color: var(--slds-c-textarea-color-background, var(--sds-c-textarea-color-background, var(--slds-g-color-neutral-base-100, #{$color-background-input})));
  color: var(--slds-c-textarea-text-color, var(--sds-c-textarea-text-color));
  border: $border-width-thin solid var(--slds-c-textarea-color-border,
    var(--sds-c-textarea-color-border, var(--slds-g-color-border-base-4, #{$color-border-input})));
  border-radius: var(--slds-c-textarea-radius-border, var(--sds-c-textarea-radius-border, $border-radius-medium));
  box-shadow: var(--slds-c-textarea-shadow, var(--sds-c-textarea-shadow));
  resize: vertical;
  transition: border $duration-quickly linear, background-color $duration-quickly linear;

  &:required {
    /*! @css-var-fallback box-shadow */
    --slds-c-textarea-shadow: none;
  }

  &:focus,
  &:active {
    outline: 0;
    color: var(--slds-c-textarea-text-color-focus, var(--sds-c-textarea-text-color-focus));
    background-color: var(--slds-c-textarea-color-background-focus, var(--sds-c-textarea-color-background-focus, var(--slds-g-color-neutral-base-100, #{$color-background-input-active})));
    border-color: var(--slds-c-textarea-color-border-focus, var(--sds-c-textarea-color-border-focus, var(--slds-s-input-color-border-focus, var(--slds-g-color-brand-base-60, #{$color-border-input-active}))));
    box-shadow: var(--slds-c-textarea-shadow-focus, var(--sds-c-textarea-shadow-focus, $shadow-button-focus));
  }

  &:focus {
    border-color: var(--slds-s-input-color-border-focus, var(--slds-g-color-border-base-4, #{$color-border-input}));
    box-shadow: var(--slds-c-textarea-shadow-focus, var(--slds-g-shadow-outline-focus-1, #{$shadow-button-focus}));
  }

  &[disabled],
  &.slds-is-disabled {
    background-color: var(--slds-g-color-neutral-base-95, #{$color-background-input-disabled});
    border-color: var(--slds-g-color-border-base-1, #{$color-border-input-disabled});
    color: inherit;
    cursor: not-allowed;
    user-select: none;

    &:focus,
    &:active {
      box-shadow: none;
    }
  }
}

.slds-has-error .slds-textarea {
  /*! @css-var-fallback background-color */
  --slds-c-textarea-color-background: var(--slds-g-color-neutral-base-100, #{$color-background-input});

  /*! @css-var-fallback border-color */
  --slds-c-textarea-color-border: var(--slds-g-color-error-base-40, #{$color-border-error});

  /*! @css-var-fallback box-shadow */
  --slds-c-textarea-shadow: var(--slds-g-color-error-base-40, #{$color-border-error}) 0 0 0 #{$border-width-thin} inset;
  background-clip: padding-box;

  &:focus,
  &:active {
    --slds-c-textarea-text-color-focus: var(--slds-c-textarea-text-color-error-focus);

    /*! @css-var-fallback background-color */
    --slds-c-textarea-color-background-focus: var(--slds-c-textarea-color-background-error-focus, var(--slds-g-color-neutral-base-100, #{$color-background-input-active}));

    /*! @css-var-fallback box-shadow */
    --slds-c-textarea-shadow-focus: var(--slds-g-color-error-base-40, #{$color-border-error}) 0 0 0 #{$border-width-thin} inset, #{$shadow-button-focus};
  }

  &:focus {
    /*! @css-var-fallback box-shadow */
    --slds-c-textarea-shadow-focus: var(--slds-g-color-error-base-40,
      #{$color-border-error}) 0 0 0 #{$border-width-thin} inset, var(--slds-g-shadow-outline-focus-1, #{$shadow-button-focus});
  }
}