@import '../../scss/styles.scss';

.field-type.textarea {
  position: relative;
  display: flex;
  flex-direction: column;

  .textarea-outer {
    @include formInput();
    display: flex;
    resize: vertical;
    min-height: base(3);
    height: 100%;

    // Scrollbar for giant content
    max-height: calc(100vh - $top-header-offset - calc(#{base(5)}));
    overflow: hidden;

    @include mid-break {
      max-height: 60vh;
    }
  }

  &.read-only {
    .textarea-outer {
      background: var(--theme-elevation-200);
      color: var(--theme-elevation-450);
      &:hover {
        border-color: var(--theme-elevation-150);
        @include shadow-sm;
      }
    }
  }

  // This element takes exactly the same dimensions as the clone
  .textarea-inner {
    display: block;
    position: relative;
    line-height: inherit;
    flex-grow: 1;
    background: none;
    outline: none;
  }

  // Unstyle the textarea, the border is rendered on .textarea-outer
  .textarea-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: inherit;
    padding: inherit;
    font: inherit;
    line-height: inherit;
    color: inherit;
    background: none;
    overflow: auto;
    resize: none;
    outline: none;
    text-transform: inherit;

    &::-webkit-scrollbar {
      display: none;
    }
    &[data-rtl='true'] {
      direction: rtl;
    }
  }

  // Clone of textarea with same height
  .textarea-clone {
    vertical-align: top;
    display: inline-block;
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre-wrap;
    pointer-events: none;
  }

  .textarea-clone::before {
    content: attr(data-value) ' ';
    visibility: hidden;
    opacity: 0;
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  .textarea-clone::after {
    content: attr(data-after);
    opacity: 0.5;
  }

  @include mid-break {
    padding: 0;
  }
}

html[data-theme='light'] {
  .field-type.textarea {
    &.error {
      .textarea-outer {
        @include lightInputError;
      }
    }
  }
}

html[data-theme='dark'] {
  .field-type.textarea {
    &.error {
      .textarea-outer {
        @include darkInputError;
      }
    }
  }
}
