@layer components {
  [data-slot="alert"] {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--alert-space-gap);
    width: 100%;
    border-radius: var(--alert-radius);
    border-width: 1px;
    padding: var(--alert-space-inset);
    font-size: var(--font-size-base);
  }

  [data-slot="alert"][data-tone="default"],
  [data-slot="alert"][data-tone="muted"],
  [data-slot="alert"][data-tone="neutral"] {
    border-color: hsl(var(--border));
    background-color: hsl(var(--muted) / 0.4);
    color: hsl(var(--foreground));
  }

  [data-slot="alert"][data-tone="destructive"] {
    border-color: hsl(var(--destructive) / var(--alert-border-alpha));
    background-color: hsl(var(--destructive) / var(--alert-bg-alpha));
    color: hsl(var(--foreground));
  }

  [data-slot="alert"][data-tone="warning"] {
    border-color: hsl(var(--warning) / var(--alert-border-alpha));
    background-color: hsl(var(--warning) / var(--alert-bg-alpha));
    color: hsl(var(--foreground));
  }

  [data-slot="alert"][data-tone="success"] {
    border-color: hsl(var(--success) / var(--alert-border-alpha));
    background-color: hsl(var(--success) / var(--alert-bg-alpha));
    color: hsl(var(--foreground));
  }

  [data-slot="alert"][data-tone="info"] {
    border-color: hsl(var(--info) / var(--alert-border-alpha));
    background-color: hsl(var(--info) / var(--alert-bg-alpha));
    color: hsl(var(--foreground));
  }

  [data-slot="alert"][data-variant="banner"] {
    border-radius: var(--banner-radius);
    border-block-start-width: 0;
    border-inline-width: 0;
    border-block-end-width: var(--banner-border-width);
    padding-block: var(--banner-space-inset-block);
    padding-inline: var(--banner-space-inset-inline);
  }

  [data-slot="alert"][data-dismissible] {
    padding-inline-end: calc(var(--alert-space-inset) + var(--space-8));
  }

  [data-slot="alert"][data-variant="banner"][data-dismissible] {
    padding-inline-end: calc(var(--banner-space-inset-inline) + var(--space-8));
  }

  [data-slot="alert"][data-variant="callout"] {
    border-radius: var(--callout-radius);
    border-block-width: 0;
    border-inline-end-width: 0;
    border-inline-start-width: var(--callout-rail-width);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    padding-block: var(--callout-space-inset-block);
    padding-inline: var(--callout-space-inset-inline);
    margin-block: var(--callout-space-stack);
  }

  [data-slot="alert"][data-variant="callout"][data-tone="destructive"] {
    border-color: hsl(var(--destructive));
  }

  [data-slot="alert"][data-variant="callout"][data-tone="warning"] {
    border-color: hsl(var(--warning));
  }

  [data-slot="alert"][data-variant="callout"][data-tone="success"] {
    border-color: hsl(var(--success));
  }

  [data-slot="alert"][data-variant="callout"][data-tone="info"] {
    border-color: hsl(var(--info));
  }

  [data-slot="alert-icon"] {
    width: var(--alert-icon-size);
    height: var(--alert-icon-size);
    flex-shrink: 0;
    margin-top: 0.125rem;
  }

  [data-slot="alert-icon"][data-tone="default"],
  [data-slot="alert-icon"][data-tone="muted"],
  [data-slot="alert-icon"][data-tone="neutral"] {
    color: hsl(var(--foreground));
  }

  [data-slot="alert-icon"][data-tone="destructive"] {
    color: hsl(var(--text-error));
  }

  [data-slot="alert-icon"][data-tone="warning"] {
    color: hsl(var(--text-warning));
  }

  [data-slot="alert-icon"][data-tone="success"] {
    color: hsl(var(--text-success));
  }

  [data-slot="alert-icon"][data-tone="info"] {
    color: hsl(var(--text-info));
  }

  [data-slot="alert-body"] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: var(--alert-inner-space-gap);
  }

  @media (min-width: 640px) {
    [data-slot="alert-body"]:has(> [data-slot="alert-actions"]) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: var(--alert-space-gap);
      row-gap: var(--alert-inner-space-gap);
      align-items: start;
    }

    [data-slot="alert-body"]:has(> [data-slot="alert-actions"])
      > :not([data-slot="alert-actions"]) {
      grid-column: 1;
    }

    [data-slot="alert-body"]:has(> [data-slot="alert-actions"]) > [data-slot="alert-actions"] {
      grid-column: 2;
      grid-row: 1;
    }
  }

  [data-slot="alert-title"] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
  }

  [data-slot="alert-title"][data-tone="destructive"] {
    color: hsl(var(--text-error));
  }

  [data-slot="alert-title"][data-tone="warning"] {
    color: hsl(var(--text-warning));
  }

  [data-slot="alert-title"][data-tone="success"] {
    color: hsl(var(--text-success));
  }

  [data-slot="alert-title"][data-tone="info"] {
    color: hsl(var(--text-info));
  }

  [data-slot="alert-description"] {
    margin-top: var(--space-1);
    font-size: var(--font-size-base);
    color: hsl(var(--muted-foreground));
    overflow-wrap: break-word;
  }

  [data-slot="alert-actions"] {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: var(--space-inline-sm);
    width: 100%;
  }

  @media (min-width: 640px) {
    [data-slot="alert-actions"] {
      width: auto;
      justify-content: flex-end;
    }
  }

  [data-slot="alert-dismiss"] {
    position: absolute;
    top: var(--alert-dismiss-space-offset);
    inset-inline-end: var(--alert-dismiss-space-offset);
    border-radius: var(--radius-sm);
    opacity: var(--alert-dismiss-rest-alpha);
    transition: opacity var(--duration-fast) ease;
  }

  [data-slot="alert-dismiss"]:hover {
    opacity: 1;
  }

  .ui-alert-dismiss-icon {
    inline-size: var(--alert-dismiss-icon-size);
    block-size: var(--alert-dismiss-icon-size);
  }

  [data-slot="alert-content"] {
    min-inline-size: 0;
    flex: 1 1 0%;
  }

  .ui-toast-icon {
    inline-size: var(--toast-icon-size);
    block-size: var(--toast-icon-size);
  }

  [data-sonner-toast][data-expanded="false"][data-front="false"][data-styled="true"] > * {
    visibility: hidden;
  }

  .ui-skeleton-block {
    border-radius: var(--skeleton-radius);
    background: var(--skeleton-background, hsl(var(--muted)));
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  .ui-skeleton-rows,
  .ui-skeleton-detail-stack,
  .ui-skeleton-stat,
  .ui-skeleton-card {
    display: grid;
    gap: var(--skeleton-row-gap);
  }

  .ui-skeleton-row,
  .ui-skeleton-table-row {
    display: flex;
    align-items: center;
    gap: var(--skeleton-cell-gap);
  }

  .ui-skeleton-form-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-stack-xs);
    min-inline-size: 0;
  }

  .ui-skeleton-form-label {
    block-size: var(--skeleton-caption-height);
    inline-size: var(--skeleton-label-width);
    max-inline-size: 100%;
    border-radius: var(--skeleton-radius);
    background: var(--skeleton-background, hsl(var(--muted)));
  }

  .ui-skeleton-form-control {
    block-size: var(--control-height);
    inline-size: 100%;
    border-radius: var(--skeleton-element-radius);
    background: var(--skeleton-background, hsl(var(--muted)));
  }

  .ui-skeleton-table {
    overflow: hidden;
    border: 1px solid hsl(var(--border));
    border-radius: var(--skeleton-radius);
  }

  [data-slot="card-content"][data-flush] .ui-skeleton-table {
    border-width: 0;
    border-radius: 0;
  }

  .ui-skeleton-table-head {
    display: flex;
    align-items: center;
    gap: var(--skeleton-cell-gap);
    padding-inline: var(--space-3);
    background: hsl(var(--muted) / 0.5);
  }

  .ui-skeleton-table-body {
    display: grid;
  }

  .ui-skeleton-table-row + .ui-skeleton-table-row {
    border-top: 1px solid hsl(var(--border));
  }

  .ui-skeleton-detail {
    max-width: 56rem;
  }

  .ui-skeleton-detail-box,
  .ui-skeleton-stat,
  .ui-skeleton-card {
    border: 1px solid hsl(var(--border));
    border-radius: var(--skeleton-radius);
    padding: var(--skeleton-card-inset);

    .ui-skeleton-line {
      block-size: var(--skeleton-block-height);
    }

    .ui-skeleton-caption {
      block-size: var(--skeleton-caption-height);
    }

    .ui-skeleton-title {
      block-size: var(--skeleton-title-height);
    }

    .ui-skeleton-detail-label {
      block-size: var(--skeleton-caption-height);
      inline-size: var(--skeleton-label-width);
    }

    .ui-skeleton-detail-value {
      block-size: var(--skeleton-block-height);
      inline-size: 100%;
      max-inline-size: var(--skeleton-detail-value-max-width);
    }

    .ui-skeleton-stat-value {
      block-size: var(--control-height);
      inline-size: var(--skeleton-stat-value-width);
    }

    .ui-skeleton-stat-caption {
      block-size: var(--skeleton-caption-height);
      inline-size: var(--skeleton-stat-caption-width);
    }
  }

  .ui-skeleton-block[data-active],
  .ui-skeleton-article[data-active] .ui-skeleton-block {
    background-image: var(
      --skeleton-sweep-gradient,
      linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--border)) 37%, hsl(var(--muted)) 63%)
    );
    background-size: 400% 100%;

    animation: ui-skeleton-sweep var(--duration-loop, 1400ms) ease infinite;
  }

  @keyframes ui-skeleton-sweep {
    from {
      background-position: 100% 50%;
    }
    to {
      background-position: 0 50%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-skeleton-block,
    .ui-skeleton-block[data-active],
    .ui-skeleton-article[data-active] .ui-skeleton-block {
      animation: none;
    }
  }

  [data-skeleton-element] {
    --skeleton-element-block-size: var(--control-height);

    display: inline-block;
    vertical-align: top;
    block-size: var(--skeleton-element-block-size);
    border-radius: var(--skeleton-element-radius);
  }

  [data-skeleton-element][data-size="xs"] {
    --skeleton-element-block-size: var(--control-height-xs);
  }

  [data-skeleton-element][data-size="sm"] {
    --skeleton-element-block-size: var(--control-height-sm);
  }

  [data-skeleton-element][data-size="lg"] {
    --skeleton-element-block-size: var(--control-height-lg);
  }

  [data-skeleton-element="avatar"] {
    inline-size: var(--skeleton-element-block-size);
    border-radius: var(--avatar-square-radius);
  }

  [data-skeleton-element="avatar"][data-shape="circle"] {
    border-radius: var(--radius-pill);
  }

  [data-skeleton-element="button"] {
    inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-button-width-ratio));
    min-inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-button-width-ratio));
  }

  [data-skeleton-element="button"][data-shape="pill"] {
    border-radius: var(--radius-pill);
  }

  [data-skeleton-element="button"][data-shape="sharp"] {
    border-radius: var(--radius-sharp);
  }

  [data-skeleton-element="input"] {
    inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-input-width-ratio));
    min-inline-size: calc(var(--skeleton-element-block-size) * var(--skeleton-input-width-ratio));
  }

  [data-skeleton-element][data-block] {
    display: block;
    inline-size: 100%;
    min-inline-size: 0;
  }

  [data-skeleton-element="node"],
  [data-skeleton-element="image"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    inline-size: var(--skeleton-node-size);
    block-size: var(--skeleton-node-size);
  }

  .ui-skeleton-image-glyph {
    inline-size: var(--skeleton-image-glyph-size);
    block-size: var(--skeleton-image-glyph-size);
    color: var(--skeleton-image-glyph-color, hsl(var(--muted-foreground) / 0.4));
  }

  .ui-skeleton-article {
    display: flex;
    align-items: flex-start;
    gap: var(--skeleton-article-avatar-gap);
    inline-size: 100%;
  }

  .ui-skeleton-article-header {
    flex: 0 0 auto;
  }

  .ui-skeleton-article-section {
    display: grid;
    flex: 1 1 auto;
    gap: var(--skeleton-article-title-gap);
    min-inline-size: 0;
  }

  .ui-skeleton-article[data-avatar] .ui-skeleton-article-title {
    margin-block-start: var(--skeleton-article-avatar-title-offset);
  }

  .ui-skeleton-article-paragraph {
    display: grid;
    gap: var(--skeleton-article-line-gap);
  }

  .ui-skeleton-article-title,
  .ui-skeleton-article-line {
    block-size: var(--skeleton-block-height);
    inline-size: var(--skeleton-line-width, 100%);
  }

  .ui-skeleton-article-line:last-child:not(:first-child):not(:nth-child(2)) {
    --skeleton-line-width: var(--skeleton-paragraph-last-width);
  }

  .ui-skeleton-article[data-round] .ui-skeleton-block {
    border-radius: var(--radius-pill);
  }

  @keyframes pulse {
    50% {
      opacity: 0.5;
    }
  }
}