@import '../../../../lib/style/themes/default';
@import '../../../../lib/style/mixins/index';
@import '../../text-field/style/mixin';

.ql-editor.ql-blank::before {
  font-style: normal !important;
}

.@{c7n-pro-prefix}-rich-text {
  .input;

  height: 100%;
  padding: 0;

  &-quill {
    .ql-container {
      border: none !important;
    }
  }

  &-toolbar, .ql-toolbar {
    background-color: #fff;
    border-width: 0 0 1px 0 !important;

    + .ql-container {
      height: calc(100% - 0.41rem);
    }
  }

  &-wrapper {
    width: 100%;
    &.@{c7n-pro-prefix}-rich-text-invalid {
      .@{c7n-pro-prefix}-rich-text {
        color: @error-color;
        border-color: @input-error-border-color;
        opacity: 1;
      }
    }

    &.@{c7n-pro-prefix}-rich-text-float-label .@{c7n-pro-prefix}-rich-text {
      padding-right: 0;
    }

    &.@{c7n-pro-prefix}-rich-text-float-label:not(.@{c7n-pro-prefix}-rich-text-multiple) .@{c7n-pro-prefix}-rich-text {
      height: 100%;
    }
  }

  &-float-label {
    &-toolbar, .ql-toolbar {
      background-color: transparent;
    }
  }

  &-float-label&-empty .@{c7n-pro-prefix}-field-label-wrapper {
    font-size: @float-label-font-size;
    background-color: @component-background;
    transform: scaleX(0.8);
  }
  &-float-label&-empty .@{c7n-pro-prefix}-field-label {
    transform: scaleY(0.8);
  }
}