// This class is common to apostrophe-rich-text widgets and
// their subclasses
.apos-rich-text-widget
{
  // Specific positioning of widget controls for rich text widgets.
  >.apos-ui
  {
    >.apos-area-widget-controls--context
    {
      top: auto;
      bottom: 100%;
    }
    >.apos-area-widget-controls--data
    {
      left: auto;
      bottom: auto;
      top: 0;
      transform: translateY(-50%);
      right: @apos-padding-1;
    }
  }
  // When a rich text widget is active, we don't want to show any additional
  // nested Apostrophe admin elements.
  &.apos-active .apos-ui { display: none; }
  // Rich texts have an empty state with a min-height and a background color.
  &.apos-empty
  {
    min-height: 100px;
    background-color: @apos-light;
    .apos-area-widget-controls { opacity: 1; }
  }
  // A focus state for rich text widgets while editing.
  >[data-rich-text]:focus
  {
    outline: @apos-green dashed 1px;
  }
}

// This class is common to apostrophe-rich-text widgets and
// their subclasses
.apos-rich-text-widget-wrapper:hover { z-index: @apos-z-index-6; }

.apos-modal-body [data-rich-text]
{
  p {
    margin: 10px 0;
  }
  a {
    color: inherit;
    text-decoration: underline;
  }
  b, strong {
    font-weight: bold;
  }
  em, i {
    font-style: italic;
  }
  ul {
    margin-left: 30px;
    list-style-type: disc;
  }
  ol {
    margin-left: 30px;
    list-style-type: decimal;
  }
}