/* smart-multiline-text-box */
smart-multiline-text-box {
  &.smart-element {
    width: var(--smart-multiline-text-box-default-width);
    height: var(--smart-multiline-text-box-default-height);
    background: transparent;
    overflow: initial;
  }

  &[cols] {
    width: auto;
  }

  &[rows] {
    height: auto;
  }
}

.smart-multiline-text-box {
  &[hover] {
    border-color: var(--smart-ui-state-border-hover);
  }

  &[focus] {
    border-color: var(--smart-outline);
  }

  > .smart-resize-trigger-container {
    margin-bottom: -1px;
  }

  .smart-container,
  .smart-inner-container {
    > .smart-resize-trigger-container {
      margin-bottom: -1px;
    }
  }

  &.smart-drop-down-box > .smart-container,
  &.smart-drop-down-box[label][hint] > .smart-container,
  &.smart-drop-down-box.smart-container {
    overflow: visible;
    display: block;
    max-height: inherit;
  }

  smart-scroll-bar {
    display: none;
  }

  textarea {
    width: 100%;
    height: 100%;
    outline: none;
    color: inherit;
    border: none;
    padding: var(--smart-editor-label-padding);
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    background-color: inherit;
    overflow: hidden;
    resize: none;
    float: left;

    border-top-left-radius: var(--smart-border-top-left-radius);
    border-bottom-left-radius: var(--smart-border-bottom-left-radius);
    border-top-right-radius: var(--smart-border-top-right-radius);
    border-bottom-right-radius: var(--smart-border-bottom-right-radius);

    &:not(.smart-text-box-hidden) {
      max-height: inherit;
    }

    &.smart-text-box-hidden {
      visibility: hidden;
      width: 100%;
      height: 0px;
      position: absolute;
      left: 0px;
      top: 0px;
    }
  }

  .smart-inner-container {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-style: inherit;
    overflow: hidden;
    color: inherit;
    width: 100%;
    height: 100%;
    position: relative;
    max-height: inherit;
  }

  .smart-initialization-value {
    display: none;
  }

  .smart-resize-element {
    box-sizing: border-box;
    height: calc(var(--smart-scroll-bar-size));
    width: calc(var(--smart-scroll-bar-size));
    position: absolute;
    bottom: 0px;
    right: 0px;
    background-color: lightgray;
    background-clip: content-box;
    border: var(--smart-border) solid var(--smart-border-width);
    display: none;
    padding: 2px 0px 0px 2px;
    cursor: nw-resize;
    touch-action: none;
  }

  .smart-required-message {
    display: none;
  }

  .smart-container,
  &.smart-container {
    textarea {
      height: 100%;
    }

    &.hscroll {
      textarea {
        height: calc(100% - var(--smart-scroll-bar-size));
      }

      smart-scroll-bar {
        width: 100%;
        height: calc(var(--smart-scroll-bar-size));
        display: block;

        &[orientation="vertical"] {
          display: none;
        }
      }
    }

    &.vscroll {
      textarea {
        width: calc(100% - var(--smart-scroll-bar-size));
      }

      smart-scroll-bar {
        &[orientation="vertical"] {
          float: right;
          width: calc(var(--smart-scroll-bar-size));
          height: 100%;
          display: block;
          border-top-right-radius: var(--smart-border-top-right-radius);
          border-bottom-right-radius: var(--smart-border-bottom-right-radius);
        }
      }
    }

    &.vscroll.hscroll {
      smart-scroll-bar {
        width: calc(100% - var(--smart-scroll-bar-size));

        &[orientation="vertical"] {
          height: calc(100% - var(--smart-scroll-bar-size));
          width: calc(var(--smart-scroll-bar-size));
        }
      }
    }
  }

  &[auto-expand] {
    height: auto;
    min-height: var(--smart-editor-height);

    textarea.smart-text-box-hidden {
      height: 0;
    }
  }

  &[auto-capitalize="words"] {
    textarea {
      text-transform: capitalize;
    }
  }

  &[auto-capitalize="characters"] {
    textarea {
      text-transform: uppercase;
    }
  }

  &[display-mode="escaped"] {
    textarea {
      white-space: nowrap;
    }
  }

  &[cols],
  &[rows] {
    textarea {
      width: inherit;
      height: inherit;
    }
  }

  &[resizable] {

    .smart-container,
    &.smart-container {
      &.hscroll {
        smart-scroll-bar {
          width: calc(100% - var(--smart-scroll-bar-size));
        }

        smart-scroll-bar smart-multiline-text-box .smart-container.vscroll.hscroll {
          smart-scroll-bar {
            height: calc(var(--smart-scroll-bar-size));
            width: calc(100% - var(--smart-scroll-bar-size));
          }
        }
      }

      &.vscroll {
        smart-scroll-bar[orientation="vertical"] {
          height: calc(100% - var(--smart-scroll-bar-size));
          width: calc(var(--smart-scroll-bar-size));
        }
      }
    }

    .smart-resize-element {
      display: block;
    }

    .smart-resize,
    .smart-resize textarea {
      user-select: none;
    }
  }

  &.outlined {
    textarea {
      border: 1px solid var(--smart-border) !important;
      padding: 10px;
    }

    &[focus] {
      textarea {
        border: 1px solid var(--smart-primary) !important;
        border-top-color: transparent !important;
      }
    }

    &.smart-element {
      height: var(--smart-multiline-text-box-default-height);
    }
  }
}

@import 'rtl/_multilinetextbox';