$dashed-accent-border: dashed $border-width full-color(accent);

.product-content {
  header h1 {
    @include max-lines(2);
  }

  > [role="toolbar"] {
    @include bg-color(filled);

    .version-dropdown {
      display: none;

      > [role="combobox"] {
        min-height: unset;
        height: 100%;
      }

      @include breakpoint-up(lg) {
        display: block;
      }
    }
  }

  .rich-text {
    display: grid;
    height: 100%;

    .rows {
      .embed {
        border: none;
      }

      > * > :not(:last-child) {
        border-bottom: $border;
      }
    }

    .file-dropzone {
      outline: $dashed-accent-border;
      border-radius: border-radius(1);
      position: relative;
      > .backdrop {
        background: $backdrop-bg;
        width: 100%;
        height: 100%;
      }
      > .backdrop,
      > .backdrop > .button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .has-sidebar {
    @include bg-color(filled);
    display: flex;
    flex-direction: column;
    gap: spacer(5) spacer(8);
    scrollbar-gutter: stable;
    height: 100%;
    overflow-y: auto;

    .rich-text {
      flex-grow: 1;
    }

    @include breakpoint-up(lg) {
      container: sidebar-container / size;
      padding-top: spacer(6);
      display: grid;
      grid-template: auto / 20rem 1fr;

      & > :first-child {
        position: sticky;
        top: 0;
        overflow-y: auto;
        padding-right: spacer(2);
        padding-bottom: spacer(6);

        @container sidebar-container (height < 100vh) {
          max-height: 100cqh;
        }
      }
    }

    .pagelist[role="tablist"] {
      @include bg-color(filled);
      border: $border;
      border-radius: border-radius(1);
      display: grid;

      > :not(:first-child) {
        border-top: $border;
      }

      [role="tab"],
      > button {
        // TODO (product_edit_react) make this a grid
        display: flex;
        gap: spacer(2);
        padding: spacer(4);
        align-items: center;
      }

      > :last-child {
        border-bottom-left-radius: border-radius(1);
        border-bottom-right-radius: border-radius(1);
      }

      // TODO (product_edit_react) remove
      @include breakpoint-up(lg) {
        > :first-child {
          border-radius: border-radius(1);
        }
      }

      .content {
        flex: 1;
      }

      [role="tab"] {
        position: relative;

        // TODO (product_edit_react) remove
        &[contenteditable="true"] {
          cursor: text;
          outline: $outline;
          outline-offset: -#{size(0.125)};

          &::before {
            @extend %icon;
            mask-image: var(--prefix-icon);
          }
        }

        [contenteditable="true"] {
          cursor: text;
          position: static;

          &::before {
            @extend %stretched;
            outline: $outline;
            outline-offset: -#{$border-width};
          }
        }

        &[aria-selected="true"] {
          background-color: var(--active-bg);
        }

        > [aria-grabbed] {
          visibility: hidden;
          position: absolute;
          left: 0;
          @extend %icon, .icon-outline-drag;
          @include text-muted;
        }

        &:hover > [aria-grabbed] {
          visibility: visible;
        }

        &.sortable-ghost {
          outline: $dashed-accent-border;

          // Don't apply opacity to the outline
          > * {
            opacity: $disabled-opacity;
          }
        }

        &.sortable-drag {
          background-color: var(--active-bg);
          border: $border;
        }
      }
    }
  }

  [role="navigation"] {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: spacer(4);
    padding-top: spacer(4);
    border-top: $border;

    @include breakpoint-up(lg) {
      display: flex;
      justify-content: flex-end;
    }
  }
}
