$module-name: form-field-rich-text;

.rich-text {
  --blockquote-border-color: var(--transparent-light);
  background: var(--input-background);
  border-radius: 1rem 1rem 0 0;
  overflow: hidden;

  &__toolbar {
    background: var(--color-platinum);
    padding: 0 unit(2);
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .toolbar-spacer {
      background: var(--color-platinum--dark);
      flex: 0 0 auto;
      width: 2px;
      height: unit(3);
      margin: 0 unit(1.5);
    }
  }

  &__editable {

    &:not(.rich-text__editable--inline) {
      resize:vertical;
      overflow: auto;
    }
    cursor: text;
    color: var(--input-text);
    padding: 0 unit(2);
    border-bottom-width: unit(.25);
    border-bottom-style: solid;
    border-bottom-color: transparent;
    transition: border-bottom-color var(--animation-easing) var(--animation-duration-standard);

    li {
      p {
        margin: 0;
      }
    }

    blockquote {
      border-left-color: var(--blockquote-border-color);
    }
  }

  &__button {
    border: 0;
    outline: none;
    background-color: transparent;
    transition: filter var(--animation-easing) var(--animation-duration-fast), background-color var(--animation-easing) var(--animation-duration-fast);
    cursor: pointer;
    height: unit(4);
    width: unit(4);
    margin: unit(0.5) unit(0.3);
    filter: grayscale(100%) brightness(65%);
    border-radius: 50%;

    svg {
      vertical-align: middle;
      width: 100%;
    }

    &:hover {
      filter: grayscale(100%) brightness(0);
    }

    &--is-active {
      background-color: var(--primary);
      filter: none;
      &:hover {
        filter: none;
      }
    }
  }

  &:hover {
    .rich-text__editable {
      border-bottom: 2px solid var(--input-accent);
    }
  }
}

.#{$module-name} {
  &--has-error {
    .#{$module-name}__error {
      opacity: 1;
    }

    .rich-text {
      border: 0.125rem solid var(--error);
    }
  }

  &__error {
    opacity: 0;
    background: var(--error);
    color: var(--form-error-text);
    transition: opacity var(--animation-easing) var(--animation-duration-standard),
    max-height var(--animation-easing) var(--animation-duration-standard);
    padding: 0.5rem 0.25rem;
    display: flex;
    align-items: center;

    svg {
      max-height: 1.2rem;
    }
  }
}