@layer base {
  [data-accordion-target="shrink"] {
    height: 0;
    overflow: hidden;
  }

  [data-entry-fade-in-value="true"] {
    opacity: 0;
  }

  :root {
    --color-modal-backdrop: color-mix(
      in oklab,
      var(--color-background),
      transparent 20%
    );
    --color-modal-background: black;
    --color-modal-text: white;

    --blur-modal-backdrop: 1rem;

    --radius-modal-body: var(--radius);
  }

  .modal {
    &.__dialog {
      margin: 0 auto;
      overflow: visible;

      background: transparent;
      color: var(--color-text);

      &::backdrop {
        background-color: var(--color-modal-backdrop);
        backdrop-filter: blur(var(--blur-modal-backdrop));
      }
    }

    &.__layout {
      height: 100vh;
      display: grid;
      grid-template-rows: 5rem 1fr;
      padding-bottom: 1rem;
    }

    &.__body {
      margin: auto;
      max-width: 90ch;
      max-height: 100%;

      overflow: auto;
      scrollbar-width: none;

      background-color: var(--color-modal-background);
      border-radius: var(--radius-modal-body);
    }
  }

  .alert {
    display: inline-flex;
    align-items: center;

    font-size: var(--text-sm);

    gap: 0.35em;
    padding: 0.3em 0.6em;

    color: var(--_color);
    border: 1px solid var(--_border-color);
    background-color: var(--_bg-color);

    border-radius: var(--radius-sm);
    backdrop-filter: brightness(15%) saturate(50%);
  }

  .error {
    --accent-error: #ff3b30;
    --_color: var(--accent-error);
  }

  .success,
  .warning,
  .error,
  .inactive {
    --_bg-color: color-mix(in oklab, transparent, var(--_color) 30%);
    --_border-color: color-mix(in oklab, transparent, var(--_color) 50%);
  }
}