.Admin :where(.Widget-controls) {
  .IconButton {
    @apply btu-button-fill-none;
  }

  :where(.icon:not(.IconButton)) {
    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon;
  }

  .icon-action-search {
    @apply before:btu-icon-search;
  }
}

/* Admin areas side nav styling */
.Admin-nav {
  @apply bg-gray-50;

  > h2,
  > .Widget:only-of-type > .Widget-title {
    @apply btu-heading-4 sticky top-0 z-[12] border-b bg-gray-50 px-4 py-[18px] text-gray-900;

    ~ .Widget .Widget-title,
    ~ .Widget .Widget-controls {
      @apply top-[65px];
    }
  }

  .Widget {
    @apply border-b bg-gray-50;

    .SearchInput input {
      @apply border-gray-300 bg-white;
    }

    > .Widget-title + *:not(.Widget-controls, .Widget-heading),
    > .Widget-controls + *:not(.Widget-heading) {
      @apply mt-4;
    }

    > .Message + form {
      @apply mt-2;
    }

    /* These content selectors should just appear as normal ComboInputs */
    > form > .ContentSelector-select + .ComboInput {
      @apply rounded-lg pe-4;

      &:not([aria-expanded='true'], :focus-visible) {
        @apply border-gray-300;
      }
    }

    > form > *,
    > .frame:last-child,
    > form:last-child {
      @apply mb-2;
    }

    > .LinkTable:last-child,
    > .LinkTable:has(+ .Widget-heading) {
      @apply mb-4;
    }

    > *:has(.Pagination) {
      @apply flex flex-col;
    }

    .Message {
      @apply mt-0;
    }
  }

  .Widget-title {
    @apply bg-gray-50 py-4 text-sm font-semibold;
  }

  .Widget-controls .IconButton,
  .Widget-controls .icon {
    @apply btu-button-xs touch-device:btu-button-sm;
  }

  .Widget-heading {
    @apply relative pb-2 pt-4 text-xs font-medium text-gray-600 before:absolute before:-left-[--space] before:-right-[--space] before:top-0 before:h-[1px] before:bg-gray-200;

    &:not(:first-of-type) {
      @apply before:absolute before:-left-[--space] before:-right-[--space] before:top-0 before:h-[1px] before:bg-gray-200;
    }
  }

  .Widget-title + .Widget-heading {
    @apply before:content-none;
  }

  /* Form filters (search input & comboinputs) */
  .ContentForm-create {
    @apply flex items-center gap-2;

    .ComboInput {
      --comboinput-w: calc(100% - theme(size.9) - theme(spacing.2));
      @apply w-[--comboinput-w];
    }
    button.action-create {
      @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray bg-white before:btu-icon before:btu-icon-plus;
    }
  }

  .ContentSelector-select + .ComboInput {
    @apply w-auto max-w-none;
  }

  /* Admin nav results */
  .LinkTable {
    @apply mb-2 empty:hidden;

    &:has(+ .LinkTable:empty) {
      @apply mb-4;
    }
  }

  .LinkTable > li {
    &.new > a {
      @apply flex gap-2 before:btu-icon before:btu-icon-plus;
    }

    &.new.selected > a {
      @apply before:text-primary-800 before:more-contrast:text-white;
    }

    &.selected {
      @apply rounded-lg bg-primary-50 more-contrast:bg-primary-900;

      a {
        @apply font-semibold text-gray-900 more-contrast:text-white;
      }
    }

    &:not(:first-child) {
      @apply mt-2;
    }

    a:hover {
      @apply text-gray-900;
    }
  }

  .Pagination {
    @apply order-2 mb-2 self-end;
  }
}

.Admin-main {
  > .Widget {
    @apply min-h-full content-start @container/admin-widget;

    &:where(:has(> .Widget-title + *:where(.Widget-controls) + form)),
    &:where(:has(> .Widget-title + form)) {
      @apply grid-rows-[auto_1fr];
    }

    &:where(:has(> .Widget-title + .Widget-controls + *:not(form) + form)) {
      @apply grid-rows-[auto_auto_1fr];
    }

    > .Widget-title {
      @apply btu-heading-4 py-[18px];
    }

    > form:has(> .CIG:not(.is-empty) ~ .ActionBar) {
      @apply content-between;
    }

    > form > .ActionBar {
      @apply self-end py-3;
    }

    > form > .ActionBar > button[name='action-trash'] {
      @apply -ml-lg before:btu-icon before:btu-icon-trash;
    }
  }
}

/* Tailwind: sm */
@media (min-width: 577px) {
  .Admin {
    --Admin-navWidth: 240px;
    @apply relative grid h-full w-full [grid-template:_'nav_main'_/_var(--Admin-navWidth)_1fr];
  }

  .Admin-nav {
    @apply overflow-auto border-e border-e-gray-200 [grid-area:nav];
  }

  .Admin-main {
    @apply overflow-auto [grid-area:main];
  }

  /* Found in Admin -> Developer -> View APIs */
  .Admin-main.is-miller {
    --Admin-millerColumns: 1;
    --miller-columns-w: calc(100% / var(--Admin-millerColumns));

    @apply flex;

    > .Widget {
      @apply min-w-[--miller-columns-w] grow overflow-auto [grid-auto-rows:max-content];

      &:not(:first-child) {
        @apply border-s border-solid border-gray-100;
      }

      h1.Widget-title {
        @apply py-5;
      }

      h2.Widget-title {
        @apply relative z-0 py-3.5 text-sm;
      }

      h1.Widget-title + h2.Widget-title {
        @apply mt-2;
      }

      &:not(.Widget-title) {
        @apply break-all;
      }

      > p {
        @apply py-2 text-sm text-gray-900;
      }

      > .BulletedList {
        @apply [&:not(:empty)]:my-2;
      }
    }
  }
}

/* Tailwind: md */
@media (min-width: 769px) {
  .Admin-main.is-miller {
    --Admin-millerColumns: 2;
  }
}

/* Tailwind: lg */
@media (min-width: 993px) {
  .Admin {
    --Admin-navWidth: 240px;
  }
}

/* Tailwind: xl */
@media (min-width: 1201px) {
  .Admin-main.is-miller {
    --Admin-millerColumns: 3;
  }
}
