op-packages/luci-theme-aurora/.dev/src/media/components/_modal.css

#modal_overlay {
  @apply pointer-events-none fixed top-0 bottom-0 hidden overflow-auto bg-transparent;

  .modal-overlay-active & {
    @apply bg-scrim pointer-events-auto inset-0 right-0 left-0 z-100 grid grid-cols-1 place-items-center backdrop-blur-md backdrop-saturate-150;
  }

  & > .modal {
    @apply border-hairline bg-surface-overlay relative flex w-5xl flex-col gap-4 rounded-3xl border p-6 wrap-break-word whitespace-normal shadow-2xl max-md:w-full max-md:gap-3 max-md:p-4;

    & h4 {
      @apply mb-0 text-center;
      & em {
        @apply text-brand font-semibold;
      }
    }

    & h5 {
      @apply text-text my-3;
    }

    & p {
      @apply text-text text-sm leading-relaxed;
    }

    & > ul {
      @apply border-hairline overflow-auto rounded-2xl border p-3;
    }

    & label.btn {
      @apply border-hairline bg-surface-sunken text-text hover:border-hairline border;
    }

    & pre {
      @apply overflow-auto;

      &.errors {
        @apply border-hairline bg-danger-surface text-danger;
      }
    }

    pre + pre {
      @apply mt-3;
    }

    & .button-row,
    & div.left,
    & div.right {
      @apply border-hairline flex shrink-0 gap-3 border-t p-4 max-md:gap-1.5 max-md:p-2.5;
    }

    & div.left {
      @apply justify-start;
    }

    & .button-row,
    & div.right {
      @apply justify-end;
    }

    &.uci-dialog {
      & ins,
      & del,
      & var {
        @apply font-mono not-italic no-underline shadow-sm;
      }

      & ins {
        @apply border-hairline bg-success-surface text-success border;
      }

      & del {
        @apply border-hairline bg-danger-surface text-danger border;
      }

      & var {
        @apply border-hairline bg-info-surface text-info border;
      }

      & .uci-change-legend {
        @apply border-hairline bg-surface-sunken mt-4 grid grid-cols-2 gap-3 rounded-2xl border p-4 max-md:grid-cols-1 max-md:gap-2 max-md:p-3;

        & .uci-change-legend-label {
          @apply text-text flex items-center gap-2 text-sm font-medium;

          & ins,
          & del,
          & var {
            @apply flex h-6 min-w-6 items-center justify-center rounded-lg px-2 text-xs font-semibold;
          }

          & var {
            & ins,
            & del {
              @apply ml-1 h-4 min-w-4 px-1;
            }
          }
        }
      }

      & .uci-change-list {
        @apply mt-4 space-y-3;

        & h5 {
          @apply bg-surface-sunken text-text mt-6 mb-2 rounded-xl px-3 py-2 text-sm font-semibold first:mt-0;
        }

        & ins,
        & del {
          @apply block rounded-xl px-4 py-3 text-sm;

          & strong {
            @apply text-sm;
          }
        }

        & var {
          @apply inline-block rounded-lg px-2 py-1 text-sm;

          & ins,
          & del {
            @apply ml-1 inline-block px-1.5 py-0.5 text-xs;
          }
        }
      }
    }
  }
}