@layer components {

  [data-slot="sheet-content"] {
    --sheet-pad-x: var(--space-chrome-x);
    --sheet-pad-y: var(--space-chrome-y);
  }

  [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-header"] {
    border-bottom: 1px solid hsl(var(--border));
  }

  [data-slot="sheet-content"]:has([data-slot="sheet-body"]) [data-slot="sheet-footer"] {
    border-top: 1px solid hsl(var(--border));
  }

  .ui-dialog-overlay {
    background-color: var(
      --dialog-overlay-background,
      color-mix(in srgb, var(--overlay-background) var(--dialog-overlay-alpha), transparent)
    );
  }

  [data-slot="sheet-overlay"] {
    background-color: var(
      --sheet-overlay-background,
      color-mix(in srgb, var(--overlay-background) var(--sheet-overlay-alpha), transparent)
    );
  }

  .ui-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--overlay-z-index);
  }

  [data-slot="dialog-content"] {
    position: fixed;
    inset-inline-start: 50%;
    top: 50%;
    z-index: var(--overlay-z-index);
    display: grid;
    width: min(var(--dialog-width-default), calc(100% - var(--dialog-viewport-inset)));
    max-width: none;
    transform: translate(-50%, -50%);
    gap: var(--dialog-space-gap);
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--background));
    padding: var(--dialog-space-inset);

    overflow: hidden;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)), var(--dialog-content-glow);
  }

  @media (min-width: 640px) {
    [data-slot="dialog-content"] {
      border-radius: var(--radius-lg);
    }
  }

  [data-slot="dialog-body"] {
    min-height: 0;
    max-height: min(60vh, 32rem);
    overflow-y: auto;
    margin-inline: calc(-1 * var(--dialog-space-x));
    padding-inline: var(--dialog-space-x);
    padding-block: var(--space-1);
    scroll-padding-block: var(--space-1);
  }

  [data-slot="dialog-header"] {
    display: flex;
    flex-direction: column;
    gap: var(--dialog-header-space-gap);
    text-align: start;
  }

  .ui-dialog-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--dialog-title-row-space-gap);

    padding-inline-end: var(--dialog-header-close-space-inline-end);
  }

  .ui-dialog-title-block {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: var(--dialog-title-block-space-gap);
  }

  .ui-dialog-extra {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--dialog-extra-space-gap);
    white-space: nowrap;
  }

  .ui-dialog-close-icon {
    inline-size: var(--control-affix-icon-size);
    block-size: var(--control-affix-icon-size);
  }

  .ui-dialog-step-up-error {
    font-size: var(--dialog-step-up-error-font-size);
    color: hsl(var(--text-error));
  }

  [data-slot="dialog-footer"] {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-inline-sm);
  }

  @media (min-width: 640px) {
    [data-slot="dialog-footer"] {
      flex-direction: row;
      justify-content: flex-end;
    }
  }

  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-header"],
  [data-slot="dialog-header"]:not([data-tone="default"]) {
    margin-inline: calc(-1 * var(--dialog-space-x));
    margin-block-start: calc(-1 * var(--dialog-space-y));
    padding: var(--dialog-space-y) var(--dialog-space-x);
    border-bottom: 1px solid hsl(var(--border));
  }

  [data-slot="dialog-content"]:has([data-slot="dialog-body"]) [data-slot="dialog-footer"] {
    margin-inline: calc(-1 * var(--dialog-space-x));
    margin-block-end: calc(-1 * var(--dialog-space-y));
    padding: var(--dialog-space-y) var(--dialog-space-x);
    border-top: 1px solid hsl(var(--border));
  }

  [data-slot="dialog-close"] {
    position: absolute;
    inset-inline-end: var(--dialog-close-space-offset);
    top: var(--dialog-close-space-offset);
    border-radius: var(--radius-sm);
    opacity: var(--dialog-close-rest-alpha);
  }

  :is([data-slot="dialog-close"], [data-slot="sheet-close"])::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    min-inline-size: var(--dialog-close-size);
    min-block-size: var(--dialog-close-size);
    inline-size: 100%;
    block-size: 100%;
  }

  [data-slot="dialog-close"]:hover {
    opacity: 1;
  }

  [data-slot="dialog-title"] {
    font-size: var(
      --font-size-lg,
      calc(var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio))
    );
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-tight);
  }

  [data-slot="dialog-description"] {
    font-size: var(--font-size-base);
    color: hsl(var(--muted-foreground));
  }

  .ui-two-factor-setup {
    width: calc(100% - 1.5rem);
    max-width: 27.5rem;
  }

  .ui-two-factor-setup-enrollment,
  .ui-two-factor-setup-recovery {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-md);
  }

  .ui-two-factor-setup-grid {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
  }

  .ui-two-factor-setup-grid .ui-qr-code[data-size] {
    inline-size: 7.5rem;
  }

  .ui-two-factor-setup-fields,
  .ui-two-factor-setup-code {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--space-stack-xs);
  }

  .ui-two-factor-setup-notice {
    border: 1px dashed hsl(var(--border));
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
  }

  .ui-two-factor-setup-recovery-codes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-md);
    background: hsl(var(--muted) / 0.4);
  }

  @media (max-width: 479px) {
    .ui-two-factor-setup-grid {
      grid-template-columns: 1fr;
      justify-items: center;
    }

    .ui-two-factor-setup-fields {
      width: 100%;
    }
  }

  [data-slot="dialog-header"]:not([data-tone="default"]) [data-slot="dialog-description"] {
    color: hsl(var(--foreground));
  }

  .ui-dialog-confirm-body {
    display: flex;
    align-items: flex-start;
    gap: var(--dialog-confirm-space-gap);
  }

  .ui-dialog-confirm-icon {
    flex: none;
    inline-size: var(--dialog-confirm-icon-size);
    block-size: var(--dialog-confirm-icon-size);
    color: hsl(var(--text-error));
  }

  .ui-dialog-confirm-text {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: var(--dialog-title-block-space-gap);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-slot="dialog-overlay"],
  [data-slot="dialog-content"],
  [data-slot="sheet-overlay"],
  [data-slot="sheet-content"],
  [data-slot="popover-content"],
  .ui-dialog-overlay,
  .ui-command-palette {
    animation: none;
    transition: none;
  }
}

@layer components {

  .ui-tooltip-content {
    z-index: var(--overlay-z-index);
    width: fit-content;
    max-width: var(--tooltip-max-width);
    padding-inline: var(--tooltip-space-inline);
    padding-block: var(--tooltip-space-block);
    border-radius: var(--tooltip-radius);
    border: 1px solid var(--tooltip-border-color, hsl(var(--border)));
    background-color: var(--tooltip-background, hsl(var(--popover)));
    color: var(--tooltip-foreground, hsl(var(--popover-foreground)));
    font-size: var(--tooltip-font-size);
    box-shadow: var(--tooltip-shadow);
    outline: none;
  }

  .ui-popover-content {
    z-index: var(--overlay-z-index);

    width: var(--popover-surface-inline-size, var(--popover-width));
    padding: var(--popover-space-inset);
    border-radius: var(--popover-radius);
    border: 1px solid var(--popover-surface-border-color, hsl(var(--border)));
    background-color: var(--popover-surface-background, hsl(var(--popover)));
    color: var(--popover-surface-foreground, hsl(var(--popover-foreground)));
    box-shadow: var(--popover-shadow);
    outline: none;
  }

  .ui-popover-header {
    display: flex;
    flex-direction: column;
    gap: var(--popover-header-space-gap);
    font-size: var(--popover-header-font-size);
  }
}

@layer components {
  .ui-sheet-header {
    display: flex;
    flex-direction: column;
    gap: var(--sheet-header-space-gap);
  }

  .ui-sheet-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sheet-title-row-space-gap);
    padding-inline-end: var(--sheet-header-close-space-inline-end);
  }

  .ui-sheet-title-block {
    display: flex;
    min-inline-size: 0;
    flex-direction: column;
    gap: var(--sheet-title-block-space-gap);
  }

  .ui-sheet-extra {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--sheet-extra-space-gap);
    white-space: nowrap;
  }

  .ui-sheet-title {
    font-size: var(--sheet-title-font-size);
    font-weight: var(--font-weight-medium);
    color: hsl(var(--foreground));
  }

  .ui-sheet-description {
    font-size: var(--sheet-description-font-size);
    color: hsl(var(--foreground) / 0.8);
  }

  .ui-sheet-body-space {
    padding-block: var(--sheet-body-space-block);
    scroll-padding-block: var(--sheet-body-space-block);
  }

  .ui-sheet-footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sheet-footer-space-gap);
  }

  .ui-sheet-close {
    position: absolute;
    inset-block-start: var(--sheet-close-offset);
    inset-inline-end: var(--sheet-close-offset);
    border-radius: var(--radius-sm);
    opacity: var(--sheet-close-rest-alpha);
    transition: opacity 150ms ease;
  }

  .ui-sheet-close:hover {
    opacity: 1;
  }

  .ui-sheet-close-icon {
    inline-size: var(--control-affix-icon-size);
    block-size: var(--control-affix-icon-size);
  }

  .ui-sheet-overlay,
  .ui-sheet-panel {
    z-index: var(--overlay-z-index);
  }

  .ui-sheet-overlay {
    inset: 0;
  }

  .ui-sheet-panel {
    box-shadow: var(--sheet-shadow);
  }

  .ui-sheet-panel[data-side="top"] {
    inset-block-start: 0;
    border-block-end: 1px solid hsl(var(--border));
  }

  .ui-sheet-panel[data-side="bottom"] {
    inset-block-end: 0;
    border-block-start: 1px solid hsl(var(--border));
  }

  .ui-sheet-body-space {
    min-block-size: 0;
  }
}