rx/presenters

.v-rich-text-area-container[data-resizable] {
  .ql-editor {
    overflow-y: scroll;
    resize: vertical;
  }
}

.v-rich-text-area-container {
  position: relative;
  width: 100%;

  &[disabled] {
    opacity: 0.67; // closely approximates MDC
    cursor: default;
    pointer-events: none;
  }

  label {
    display: block;
    margin-top: 16px;
  }

  .ql-toolbar {
    margin-top: 16px;

    &.ql-snow {
      border-color: $v-input-border-color;
      border-top-left-radius: $v-input-border-radius;
      border-top-right-radius: $v-input-border-radius;
    }

    .ql-horizontal-rule:after {
      content: '—–';
    }
  }

  .v-rich-text-area {
    &.ql-snow {
      border-color: $v-input-border-color;
      border-bottom-left-radius: $v-input-border-radius;
      border-bottom-right-radius: $v-input-border-radius;
    }
  }

  &:hover {
    .ql-toolbar {
      &.ql-snow {
        border-color: $v-input-hover-border-color;
      }
    }

    .v-rich-text-area {
      &.ql-snow {
        border-color: $v-input-hover-border-color;
      }
    }
  }
}

$fontSizes: (
  xx-small: 'Tiny',
  x-small: 'Small',
  medium: 'Normal',
  large: 'Large',
  x-large: 'Huge',
);

@each $size, $text in $fontSizes {
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="#{$size}"]::before {
    content: $text;
    font-size: $size;
  }
}