@import '../../../style_config/config';


/* ----------------------------- 코드 최적화가 필요합니다. ----------------------------- */
/* Text Inputs + Textarea
/* Text inputs */

.JDtextarea {
  
  // General Styles
  background-color: transparent;
  border: none;
  border-bottom: $input-border;
  border-radius: 0;
  outline: none;
  height: $input-height;
  width: 100%;
  font-size: $input-font-size;
  margin-top: $textarea-margin-top;
  // padding: $input-padding;
  box-shadow: none;
  box-sizing: content-box;
  transition: $input-transition;
  padding: .8rem 0 1.6rem 0;
  resize: none;
  min-height: $input-height;
  
  //아래에있는 라벨을 위로 끌어올립니다
  &+.JDtextarea_label {
    font-size: $label-font-size;
    color: $label-font-color;
    position: absolute;
    top: 0.1rem;
    left: 0;
  }

  &::placeholder {
    color: $placeholder-text-color;
  }


  &--doubleHeight {
    height: $input-height *2!important;
  }

  &--halfHeight {
    min-height: $input-height /2;
    height: $input-height /2;
  }
  // Disabled input style
  &:disabled,
  &[readonly="readonly"] {
    color: $input-disabled-color;
    border-bottom: $input-disabled-border;
  }

  // Disabled .JDinput_label style
  &:disabled+.JDtextarea_label,
  &[readonly="readonly"]+.JDtextarea_label {
    color: $input-disabled-color;
  }

  // Focused input style
  &:focus:not([readonly]) {
    border-bottom: 1px solid $input-focus-color;
    box-shadow: 0 1px 0 0 $input-focus-color;
  }

  // Focused .JDinput_label style
  &:focus:not([readonly])+.JDtextarea_label {
    color: $input-focus-color;
  }

  // Valid Input Style
  &--valid.JDtextarea,
  &--valid.JDtextarea:focus {
    @extend %valid-input-style;
  }

  // Custom Success Message
  &--valid.JDtextarea+.JDtextarea_label:after,
  &--valid.JDtextarea:focus+.JDtextarea_label:after {
    @extend %custom-success-message;
  }

  // Invalid Input Style
  &--invalid.JDtextarea,
  &--invalid.JDtextarea:focus {
    @extend %invalid-input-style;
  }

  // Custom Error message
  &--invalid.JDtextarea+.JDtextarea_label:after,
  &--invalid.JDtextarea:focus+.JDtextarea_label:after {
    @extend %custom-error-message;
  }

  // Full width .JDinput_label when using validate for error messages
  &--validate.JDtextarea+.JDtextarea_label {
    width: 100%;
  }

  // Form Message Shared Styles
  &+.JDtextarea_label:after {
    @extend %input-after-style;
  }

  // TODO: Remove once input fields are reworked to support validation messages better
  &--invalid.JDtextarea+.JDtextarea_label:after,
  &--valid.JDtextarea+.JDtextarea_label:after {
    display: none;
  }

  &--invalid.JDtextarea+.JDtextarea_label--active:after,
  &--valid.JDtextarea+.JDtextarea_label--active:after {
    display: block;
  }

  &.JDtextarea--scroll {
    overflow-y: auto;
    @extend %JDscrollbar;
  }
}

/* Textarea */

// Default textarea
.JDtextarea {
  width: 100%;
  background-color: transparent;

  &:not(.JDtextarea--scroll)::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just create scrollbar invisible */
  }
  /* optional: show position indicator in red */
  &::-webkit-scrollbar-thumb {
      background: #FF0000;
  }

  // Fixes validation messages for dynamic textareas
  &--validate+.JDinput_label {
    &::after {
      top: calc(100% - 12px);
    }

    &:not(.JDinput_label-icon).active {
      transform: translateY(-25px);
    }

    height: 100%;
  }



  // 🅱️ 바이트 계산 
  &__byte {
    position:absolute;
    font-size: $typho-tiny;
    color:$grey-level2;
    right:0;
    bottom: calc(#{$standard-margin-bottom} + 8px) ;
  }

  
  &--autoHeight {
        padding:0px;
        overflow-y:scroll;
        height: 1px;
  }
  
}

// For textarea autoresize
.hiddendiv {
  display: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  /* future version of deprecated 'word-wrap' */
  padding-top: 1.2rem;
  /* prevents text jump on Enter keypress */

  // Reduces repaints
  position: absolute;
  top: 0;
}

.JDinput-wrap {
  &--fullHeight {
    height: 100%;
  }
  .JDtextarea {
    box-sizing:border-box;
    margin-top: $textarea-margin-top;
    height: calc(100% - #{$textarea-margin-top});
    &:not(.JDtextarea--labeled) {
      margin-top:0px;
    }

  }
}