<commit_before>@import "base";

/*******************************************************************************
 * Contextual classes:
 * - is-disabled: When input is disabled
 * - is-filled-in: When value is available or the user clicked into the input
 * - is-tabbed: When the input is focused by tabbing (a11y)
 * - is-focused: When the input is focused
 * - is-initialized: When the JS for the component is initialized
 * - has-no-label: If there is no label available
 ******************************************************************************/
// font settings
$textAreaLabelFontSize: 1.125rem;
$textAreaLabelFontSizeFilledIn: 0.75rem;
$textAreaLabelFontFamily: inherit;
$textAreaFontSize: 1.125rem;
$textAreaLineHeight: 1.375rem;
$textAreaFontFamily: inherit;

// size settings
$textAreaHeight: $textAreaLineHeight * 5;
$textAreaPaddingX: 15px;
$textAreaPaddingY: 10px;
$textAreaLabelSpacing: 5px;
$textAreaBorderRadius: 2px;

// need to use string here due to:
// https://github.com/webpack-contrib/sass-loader/issues/487
$variants: "dark", "light";
@each $color in $variants {
  @if $color == "light" {
    // color settings
    $textAreaWrapperBorderColor: $black !global;
    $textAreaBorderBottomColor: $black !global;
    $textAreaBackgroundColor: transparent !global;
    $textAreaColor: $black !global;
    $textAreaLabelColor: $black !global;
    $textAreaLabelColorFilledIn: $black !global;
    $textAreaErrorColor: $red !global;
    $textAreaFocusBorderColor: #95a5a6 !global;
  } @else {
    // color settings
    $textAreaWrapperBorderColor: $white !global;
    $textAreaBorderBottomColor: $white !global;
    $textAreaBackgroundColor: transparent !global;
    $textAreaColor: $white !global;
    $textAreaLabelColor: $white !global;
    $textAreaLabelColorFilledIn: $white !global;
    $textAreaErrorColor: $red !global;
    $textAreaFocusBorderColor: #95a5a6 !global;
  }

  /*****************************************************************************
   * General
   ****************************************************************************/
  .text-area {
    $block: &;

    &--#{unquote($color)} {

      &.is-tabbed {
        outline: 1px solid $textAreaFocusBorderColor;
        outline-offset: 3px;
      }

      #{$block}__wrapper {
        position: relative;
        width: 100%;
        border: 1px solid $textAreaWrapperBorderColor;
        padding: 1px;
        box-sizing: border-box;
        border-radius: $textAreaBorderRadius;
      }

      &.is-focused #{$block}__wrapper {
        border-width: 2px;
        padding: 0;
      }

      /*************************************************************************
       * Input
       ************************************************************************/
      #{$block}__input {
        border: none;
        cursor: text;
        display: block;
        height: calc(#{$textAreaHeight} + #{$textAreaLabelFontSizeFilledIn} + (#{$textAreaPaddingY} * 2) + #{$textAreaLabelSpacing});
        line-height: $textAreaLineHeight;
        box-sizing: border-box;
        padding: calc(#{$textAreaLabelFontSizeFilledIn} + #{$textAreaPaddingY} + #{$textAreaLabelSpacing}) #{$textAreaPaddingX} #{$textAreaPaddingY} #{$textAreaPaddingX};
        background: $textAreaBackgroundColor;
        font-size: $textAreaFontSize;
        font-family: $textAreaFontFamily;
        resize: none;
        border-radius: $textAreaBorderRadius;
        width: 100%;

        &:focus {
          outline: none;
        }
      }
      &.is-disabled #{$block}__input {
        cursor: not-allowed;
      }

      /*************************************************************************
       * Label (will be moved to top when value available)
       ************************************************************************/
      #{$block}__label {
        position: absolute;
        top: calc(#{$textAreaLabelFontSizeFilledIn} + #{$textAreaPaddingY});
        left: 0;
        height: $textAreaHeight;
        line-height: $textAreaLineHeight;
        width: 100%;<commit_msg>Fix text area color in dark variant<commit_after>@import "base";

/*******************************************************************************
 * Contextual classes:
 * - is-disabled: When input is disabled
 * - is-filled-in: When value is available or the user clicked into the input
 * - is-tabbed: When the input is focused by tabbing (a11y)
 * - is-focused: When the input is focused
 * - is-initialized: When the JS for the component is initialized
 * - has-no-label: If there is no label available
 ******************************************************************************/
// font settings
$textAreaLabelFontSize: 1.125rem;
$textAreaLabelFontSizeFilledIn: 0.75rem;
$textAreaLabelFontFamily: inherit;
$textAreaFontSize: 1.125rem;
$textAreaLineHeight: 1.375rem;
$textAreaFontFamily: inherit;

// size settings
$textAreaHeight: $textAreaLineHeight * 5;
$textAreaPaddingX: 15px;
$textAreaPaddingY: 10px;
$textAreaLabelSpacing: 5px;
$textAreaBorderRadius: 2px;

// need to use string here due to:
// https://github.com/webpack-contrib/sass-loader/issues/487
$variants: "dark", "light";
@each $color in $variants {
  @if $color == "light" {
    // color settings
    $textAreaWrapperBorderColor: $black !global;
    $textAreaBackgroundColor: transparent !global;
    $textAreaColor: $black !global;
    $textAreaLabelColor: $black !global;
    $textAreaLabelColorFilledIn: $black !global;
    $textAreaErrorColor: $red !global;
    $textAreaFocusBorderColor: #95a5a6 !global;
  } @else {
    // color settings
    $textAreaWrapperBorderColor: $white !global;
    $textAreaBackgroundColor: transparent !global;
    $textAreaColor: $white !global;
    $textAreaLabelColor: $white !global;
    $textAreaLabelColorFilledIn: $white !global;
    $textAreaErrorColor: $red !global;
    $textAreaFocusBorderColor: #95a5a6 !global;
  }

  /*****************************************************************************
   * General
   ****************************************************************************/
  .text-area {
    $block: &;

    &--#{unquote($color)} {

      &.is-tabbed {
        outline: 1px solid $textAreaFocusBorderColor;
        outline-offset: 3px;
      }

      #{$block}__wrapper {
        position: relative;
        width: 100%;
        border: 1px solid $textAreaWrapperBorderColor;
        padding: 1px;
        box-sizing: border-box;
        border-radius: $textAreaBorderRadius;
      }

      &.is-focused #{$block}__wrapper {
        border-width: 2px;
        padding: 0;
      }

      /*************************************************************************
       * Input
       ************************************************************************/
      #{$block}__input {
        border: none;
        cursor: text;
        display: block;
        height: calc(#{$textAreaHeight} + #{$textAreaLabelFontSizeFilledIn} + (#{$textAreaPaddingY} * 2) + #{$textAreaLabelSpacing});
        line-height: $textAreaLineHeight;
        box-sizing: border-box;
        padding: calc(#{$textAreaLabelFontSizeFilledIn} + #{$textAreaPaddingY} + #{$textAreaLabelSpacing}) #{$textAreaPaddingX} #{$textAreaPaddingY} #{$textAreaPaddingX};
        background: $textAreaBackgroundColor;
        font-size: $textAreaFontSize;
        font-family: $textAreaFontFamily;
        resize: none;
        border-radius: $textAreaBorderRadius;
        width: 100%;
        color: $textAreaColor;

        &:focus {
          outline: none;
        }
      }
      &.is-disabled #{$block}__input {
        cursor: not-allowed;
      }

      /*************************************************************************
       * Label (will be moved to top when value available)
       ************************************************************************/
      #{$block}__label {
        position: absolute;
        top: calc(#{$textAreaLabelFontSizeFilledIn} + #{$textAreaPaddingY});
        left: 0;
        height: $textAreaHeight;
        line-height: $textAreaLineHeight;
        width: 100%;
{'fraction_non_alphanumeric': 0.25287783141477904, 'fraction_numerical': 0.012872880306968685, 'mean_word_length': 3.6624350836699366, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4672852', 'n_tokens_mistral': 2346, 'n_tokens_neox': 2179, 'n_words': 499}