.ContentEditDrawer {
  --offset: 0px; /* Controls the distance of shelf from the edges of the viewport */
  --nav-width: 0px; /* Offsets the shelf position based on the width of page nav*/
  --panel-width: var(
    --has-right-rail,
    var(--right-rail-w)
  ); /* Width of guide or ask ai panel */

  @apply fixed scale-x-0 [content-visibility:hidden] md:[--nav-width:var(--pageNav-w)];

  &.is-open {
    @apply bottom-[calc(var(--toolbar-h-mobile)_+_var(--offset))] left-[calc(var(--nav-width)_+_var(--offset))] z-20 origin-right scale-x-100 overflow-hidden border-e bg-gray-50 p-0 shadow-lg transition-transform duration-300 ease-out [content-visibility:auto] max-md:right-[--offset] md:bottom-[--offset] md:left-[calc(var(--nav-width)_+_var(--panel-width)_+_var(--offset))] md:right-[calc(var(--right-toolbar-w)_+_var(--offset))];
  }
}

/* Shelf responsive width adjustments */
.Page-content.is-previewing,
.Page-content.has-widget-panel-open,
.Popup-content.is-previewing,
.Popup-content.has-widget-panel-open {
  /* When any panel is visible (preview OR widgets), use constrained width */
  .ContentEditDrawer.is-open {
    @apply md:w-[var(--contentForm-resized-safe-w,var(--contentForm-w))];
  }
}

.ContentEditDrawer-header {
  @apply flex items-center gap-2 border-y bg-gray-50 px-4 py-3.5;

  .closeButton {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray relative bg-gray-50 before:btu-icon before:btu-icon-x;
  }

  .Widget-title {
    @apply btu-heading-4 grow border-b-0 bg-gray-50 py-0;
  }
}

.ContentEditDrawer-widget {
  @apply relative contain-content;

  &-carousel {
    @apply gap-2 bg-gray-50;

    > .CIG {
      @apply overflow-y-hidden overflow-x-scroll py-2;

      > .CIG-row {
        @apply mt-0 p-0;

        > .CIG-large {
          @apply m-0 min-h-[calc(164px_+_theme(spacing.[1.5]))];

          > .RCIG-list {
            li.message-warning {
              @apply col-span-full mr-6 flex w-full bg-warning-25 before:ml-6 before:shadow-none;
            }
          }
        }
      }
    }
  }
}

/* Display spinner when filters are updated and frame is loading */
.ContentEditDrawer-widget.is-loading {
  &::before {
    @apply absolute inset-0 z-[2] blokk bg-gray-50 content-[''];
  }

  &::after {
    @apply btu-loader visible absolute left-1/2 top-1/2 z-[2] blokk size-[--loader-size] -translate-x-1/2 -translate-y-1/2;
  }
}

.ContentEditDrawer-widget-carousel-list {
  --margin-offset: 0px;
  @apply btu-scrollshadow-50 relative mx-4 my-0 flex gap-2 border-0 p-0 supports-[animation-timeline:--scroll-timeline]:[--margin-offset:-2rem];

  li {
    @apply first:ms-[--margin-offset] last:me-[--margin-offset];
  }

  .ContentEditDrawer-widget-carousel-list-item.RCIG-item {
    @apply flex h-[164px] min-w-[148px] max-w-[148px] cursor-move flex-col rounded-lg border border-gray-300 !bg-gray-50 shadow-xs;
  }

  .ContentEditDrawer-widget-carousel-list-item-moreInfoButton.ContentSummary-info {
    @apply absolute bottom-[30px] right-3 m-0 hidden touch-device:blokk;
  }

  .ContentEditDrawer-widget-carousel-list-item-selectButton {
    @apply absolute right-0 top-0 m-1 box-content rounded-lg border-[6px] border-white bg-gray-300 before:absolute before:inset-[1px] before:blokk before:rounded-[1px] before:bg-white hover:border-gray-100 hover:bg-primary-800 hover:before:bg-primary-50;

    &:checked {
      @apply border-primary-50 bg-primary-800 before:bg-primary-800 hover:border-primary-800 hover:bg-primary-800;
    }
  }

  /* Item hover state */
  .ContentEditDrawer-widget-carousel-list-item.RCIG-item:hover {
    .ContentEditDrawer-widget-carousel-list-item-title,
    .ContentEditDrawer-widget-carousel-list-item-type,
    .ContentEditDrawer-imageTitle {
      @apply bg-gray-100;
    }

    .ContentSummary-info {
      @apply blokk;
    }
  }

  /* Item selected state */
  .ContentEditDrawer-widget-carousel-list-item.RCIG-item.Sortable-selected {
    @apply border-primary-500;

    .ContentEditDrawer-widget-carousel-list-item-title,
    .ContentEditDrawer-widget-carousel-list-item-type,
    .ContentEditDrawer-imageTitle {
      @apply bg-gray-100;
    }
  }

  /* Item with no image preview */
  .ContentEditDrawer-widget-carousel-list-item.RCIG-item:not(:has(img)):not(
      .Sortable-drag
    ) {
    @apply before:btu-icon-via-mask-file-text before:z-[1] before:m-auto before:btu-icon-gradient-primary after:absolute after:top-[18.5px] after:size-14 after:rounded-full after:bg-gray-50 after:mix-blend-multiply dark:after:bg-gray-100 dark:after:mix-blend-normal;
  }

  /* Item title */
  .ContentEditDrawer-widget-carousel-list-item-title.RCIG-title {
    @apply w-full cursor-move truncate border-t bg-white px-4 pb-0 pt-4 text-sm text-gray-900 [background-image:none] before:hidden after:!hidden;

    &:has(~ .ContentSummary-info) {
      @apply pe-11;
    }
  }

  /* Item content type */
  .ContentEditDrawer-widget-carousel-list-item-type {
    @apply w-full truncate bg-white p-4 pt-0 text-xs text-gray-500 before:hidden;
  }

  /* Image preview */
  .ContentEditDrawer-widget-carousel-list-item-image {
    @apply size-full max-h-[91px] object-contain;

    ~ .ContentEditDrawer-imageTitle {
      @apply w-full truncate border-t bg-white px-4 pb-0 pt-4 text-sm font-semibold text-gray-900;

      &:has(~ .ContentSummary-info) {
        @apply pe-11;
      }
    }
  }
}

.ContentEditDrawer-widget-filters {
  @apply flex h-0 origin-top flex-wrap gap-2 border-b bg-gray-50 p-0 opacity-0 transition-[height_opacity] duration-500 max-md:flex-col;

  &.is-visible {
    @apply h-fit px-4 py-2 opacity-100;
  }

  .ContentEditDrawer-widget-filters-sourceType-customFilters {
    @apply flex flex-wrap gap-2 max-md:flex-col;
  }

  .queryRestrictions {
    @apply flex flex-wrap gap-2 max-md:flex-col;
  }

  .queryRestrictions > .watch-button {
    @apply text-md;
  }

  .ComboInput {
    @apply w-auto items-center text-sm;
  }
}

/* Show/hide filters toggle present when The Shelf is in the right rail */
.ContentEditDrawer-filtersToggle {
  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-sliders-horizontal;

  &[aria-expanded='true'] {
    @apply btu-button-pressed;
  }
}

/* ContentEditDrawer items when dragged out of The Shelf and placed somewhere */
.Sortable.RCS-list,
.Sortable.RCIG-list,
.Sortable.CIG-row {
  &:not([class*='ContentEditDrawer-widget-carousel-list']) {
    /* RCIG Grid view */
    .ContentEditDrawer-widget-carousel-list-item.is-gridItem {
      > .ContentSelector-search {
        @apply relative col-span-full row-start-2 m-0 flex h-full items-center justify-center border-y border-solid border-gray-300 bg-gray-50 no-underline before:btu-button before:btu-button-text-hidden before:btu-button-fill-none before:btu-button-gray before:btu-button-xs before:btu-icon touch-device:btu-button-sm before:absolute before:-bottom-[33px] before:right-10;

        img {
          @apply max-h-36;
        }

        figcaption {
          @apply hidden;
        }
      }

      > .ContentSelector-clear {
        @apply hidden;
      }

      > .ContentSelector-edit {
        @apply -right-2 col-start-3 row-start-3 my-1;
      }

      &:has(
          > *:not(.CIG, .ContentSelector-search, .ContentSelector-edit):hover
        ) {
        .ContentSelector-search:before,
        .ContentSelector-edit {
          @apply bg-white;
        }
      }

      &:has(> .ContentSelector-search:hover),
      &:has(> .ContentSelector-edit:hover) {
        @apply bg-white;
      }
    }

    /* RCIG List view */
    .ContentEditDrawer-widget-carousel-list-item.is-listItem {
      > .ContentSelector-search,
      > .ContentSelector-edit,
      > .ContentSelector-clear {
        @apply hidden;
      }
    }
  }

  /* Hides ghost when dragging into a single value field */
  &[data-type='record'] {
    &:not([class*='ContentEditDrawer-widget-carousel-list']) {
      &:not([data-field='items']) {
        .ContentEditDrawer-widget-carousel-list-item.Sortable-ghost {
          @apply hidden;
        }
      }
    }
  }
}

/* Dragging from the shelf into RTE */
.CIG-small[data-rte-container='true'] {
  .ContentEditDrawer-widget-carousel-list-item {
    @apply hidden;
  }

  .drawerDropOverlay {
    @apply z-20 before:absolute before:size-full before:rounded-lg before:border before:border-dashed before:border-primary-600 before:bg-primary-50/50 before:content-[''] hover:before:border-solid;
  }
}

/* Content Edit Drawer inside a popup dialog */
dialog:modal > .Popup .ContentEditDrawer.is-open {
  --offset: 1rem;
  --nav-width: 0px;
  --panel-width: 0px;

  @apply rounded-es-2xl;
}
