.StyleEmbeddedContent {
  @apply relative flex h-[calc(100dvh_-_1px_-_4rem_-_var(--gap)_*_2)] flex-col;
}

.StyleEmbeddedContent-heading {
  @apply pb-4 pt-6 text-md font-semibold text-gray-900;
}

.StyleEmbeddedContent-content {
  @apply h-full overflow-auto md:grid md:grid-cols-[17.5rem_1fr];
}

.StyleEmbeddedContent-nav {
  @apply w-full border-b border-e border-gray-200 bg-gray-50 md:overflow-y-auto md:border-b-0;
}

.StyleEmbeddedContent-search {
  @apply relative blokk;
}

.StyleEmbeddedContent-search input {
  @apply m-4 w-[calc(100%_-_theme(spacing.8))] border-transparent bg-gray-100 !ps-[calc(theme(iconSize.md)+theme(spacing.6))];
}

.StyleEmbeddedContent-search label {
  @apply pointer-events-none absolute bottom-0 left-8 top-0 z-10 my-auto size-5 overflow-hidden before:btu-icon before:btu-icon-search;
}

.StyleEmbeddedContent-nav ul {
  @apply grid gap-2 border-t p-4;
}

.StyleEmbeddedContent-nav li > a {
  @apply blokk rounded-lg p-2 text-sm font-semibold text-gray-700 no-underline;

  &:hover {
    @apply bg-gray-100 text-gray-900;
  }
}

.StyleEmbeddedContent-nav li.is-selected a {
  @apply bg-primary-50 text-gray-900;
}

.StyleEmbeddedContent-main {
  @apply bg-gray-100 p-6 pt-0 md:overflow-y-auto;
}

.StyleEmbeddedContent-items {
  @apply !grid grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))] gap-4;
  li {
    @apply flex;
  }
}

.LinkTable.StyleEmbeddedContent-items {
  @apply grid-cols-1;
}

.StyleEmbeddedContent-warning {
  @apply hidden;
}
