payloadcms/packages/richtext-slate/src/field/index.scss

@import '~@tabshiftcms/ui/scss';

@layer payload-default {
  .rich-text {
    margin-bottom: base(2);
    display: flex;
    flex-direction: column;
    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.8);
      line-height: 1.5;

      *[data-slate-node='element'] {
        margin-top: 0.75em;
        position: relative;
        line-height: 1.5;
        letter-spacing: normal;
      }

      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: 700;
        letter-spacing: normal;
      }

      h1[data-slate-node='element'] {
        font-size: base(1.4);
        margin-block: 0.5em 0.4em;
        line-height: base(1.2);
        letter-spacing: normal;
      }

      h2[data-slate-node='element'] {
        font-size: base(1.25);
        margin-block: 0.55em 0.4em;
        line-height: base(1.2);
        letter-spacing: normal;
      }

      h3[data-slate-node='element'] {
        font-size: base(1.1);
        margin-block: 0.6em 0.4em;
        line-height: base(1.3);
        letter-spacing: normal;
      }

      h4[data-slate-node='element'] {
        font-size: base(1);
        margin-block: 0.65em 0.4em;
        line-height: base(1.4);
        letter-spacing: normal;
      }

      h5[data-slate-node='element'] {
        font-size: base(0.9);
        margin-block: 0.7em 0.4em;
        line-height: base(1.5);
        letter-spacing: normal;
      }

      h6[data-slate-node='element'] {
        font-size: base(0.8);
        margin-block: 0.75em 0.4em;
        line-height: base(1.5);
      }
    }

    &--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;
        }
      }
    }
  }
}