@import 'mzinga/scss';

.rich-text {
  margin-bottom: base(2);
  display: flex;
  isolation: isolate;

  &__toolbar {
    @include blur-bg(var(--theme-elevation-0));
    margin-bottom: $baseline;
    border: $style-stroke-width-s solid var(--theme-elevation-150);
    position: sticky;
    z-index: 1;
    top: var(--doc-controls-height);
  }

  &__toolbar-wrap {
    padding: base(0.25);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    position: relative;
    z-index: 1;

    &:after {
      content: ' ';
      opacity: 0.8;
      position: absolute;
      top: calc(100% + 1px);
      background: linear-gradient(var(--theme-elevation-0), transparent);
      display: block;
      left: -1px;
      right: -1px;
      height: base(1);
    }
  }

  &__editor {
    font-family: var(--font-serif);
    font-size: base(0.625);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--font-body);
      line-height: 1.125;
    }

    h1[data-slate-node='element'] {
      font-size: base(1.5);
      margin: base(1) 0 base(0.5);
    }

    h2[data-slate-node='element'] {
      font-size: base(1.25);
      margin: base(1) 0 base(0.5);
    }

    h3[data-slate-node='element'] {
      font-size: base(1.125);
      margin: base(0.75) 0 base(0.5);
    }

    h4[data-slate-node='element'] {
      font-size: base(1);
      margin: base(0.5) 0 base(0.5);
    }

    h5[data-slate-node='element'] {
      font-size: base(0.875);
      margin: base(0.25) 0 base(0.25);
    }

    h6[data-slate-node='element'] {
      font-size: base(0.75);
      margin: base(0.25) 0 base(0.25);
    }
  }

  &--gutter {
    .rich-text__editor {
      padding-left: $baseline;
      border-left: 1px solid var(--theme-elevation-100);
    }
  }

  &__input {
    min-height: base(10);
  }

  &__wrap {
    width: 100%;
    position: relative;
  }

  &__wrapper {
    width: 100%;
  }

  &--read-only {
    .rich-text__editor {
      background: var(--theme-elevation-200);
      color: var(--theme-elevation-450);
      padding: base(0.5);

      .popup button {
        display: none;
      }
    }

    .rich-text__toolbar {
      pointer-events: none;
      position: relative;
      top: 0;

      &::after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--theme-elevation-200);
        opacity: 0.85;
        z-index: 2;
        backdrop-filter: unset;
      }
    }
  }

  &__button {
    @extend %btn-reset;
    padding: base(0.25);

    svg {
      @include color-svg(var(--theme-elevation-800));
      width: base(0.75);
      height: base(0.75);
    }

    &:hover {
      background-color: var(--theme-elevation-100);
    }

    &__button--active,
    &__button--active:hover {
      background-color: var(--theme-elevation-150);
    }
  }

  &__drawerIsOpen {
    top: base(1);
  }

  @include mid-break {
    &__toolbar {
      top: base(3);
    }

    &__drawerIsOpen {
      top: base(1);
    }
  }
}

[data-slate-node='element'] {
  margin-bottom: base(0.25);
}

html[data-theme='light'] {
  .rich-text {
    &.error {
      .rich-text__editor,
      .rich-text__toolbar {
        @include lightInputError;
      }
    }
  }
}

html[data-theme='dark'] {
  .rich-text {
    &.error {
      .rich-text__editor,
      .rich-text__toolbar {
        @include darkInputError;
      }
    }
  }
}