.x-card {
  border-radius: var(--card-border-radius);
  font-family: var(--default-font-family);
  font-weight: var(--font-weight-regular);
  text-align: start;
  box-sizing: border-box;
  padding-block-start: var(--card-padding-block-start, var(--card-padding));
  padding-block-end: var(--card-padding-block-end, var(--card-padding));
  padding-inline-start: var(--card-padding-inline-start, var(--card-padding));
  padding-inline-end: var(--card-padding-inline-end, var(--card-padding));
  font-style: normal;
  display: block;
  position: relative;
  overflow: hidden;
}

.x-card:before, .x-card:after {
  content: "";
  pointer-events: none;
  border-radius: calc(var(--card-border-radius) - var(--card-border-width));
  inset: var(--card-border-width);
  transition: inherit;
  position: absolute;
}

.x-card:before {
  z-index: -1;
}

.x-card {
  contain: paint;
}

.x-card, .x-card:where([data-size="3"]) {
  --card-padding: var(--space-5);
  --card-border-radius: var(--radius-5);
}

.x-card:where([data-size="1"]) {
  --card-padding: var(--space-3);
  --card-border-radius: var(--radius-4);
}

.x-card:where([data-size="2"]) {
  --card-padding: var(--space-4);
  --card-border-radius: var(--radius-4);
}

.x-card:where([data-size="4"]) {
  --card-padding: var(--space-6);
  --card-border-radius: var(--radius-5);
}

.x-card:where([data-size="5"]) {
  --card-padding: var(--space-8);
  --card-border-radius: var(--radius-6);
}

:where(:root), :where([data-neutral]) {
  --card-surface-box-shadow: 0 0 0 1px var(--neutral-a5);
  --card-surface-hover-box-shadow: 0 0 0 1px var(--neutral-a7);
  --card-surface-active-box-shadow: 0 0 0 1px var(--neutral-a6);
  --card-elevated-box-shadow-inner: 0 0 0 1px var(--neutral-a3), 0 0 0 1px transparent,
    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--neutral-a2),
    0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
  --card-elevated-box-shadow-outer: 0 0 0 0 var(--neutral-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
    0 1px 1px -1px var(--neutral-a2), 0 2px 1px -2px var(--black-a1),
    0 1px 3px -1px var(--black-a1);
  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--neutral-a4), 0 1px 1px 1px var(--black-a1),
    0 2px 1px -1px var(--neutral-a3), 0 2px 3px -2px var(--black-a1),
    0 3px 12px -4px var(--neutral-a3), 0 4px 16px -8px var(--black-a1);
  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--neutral-a4), 0 1px 1px 0 var(--black-a1),
    0 2px 1px -2px var(--neutral-a3), 0 2px 3px -3px var(--black-a1),
    0 3px 12px -5px var(--neutral-a3), 0 4px 16px -9px var(--black-a1);
  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--neutral-a3), 0 0 0 1px transparent,
    0 0 0 .5px var(--black-a1), 0 1px 1px 0 var(--neutral-a4),
    0 2px 1px -1px var(--black-a1), 0 1px 3px 0 var(--black-a1);
  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--neutral-a3), 0 0 0 0 transparent, 0 0 0 0 var(--black-a1),
    0 1px 1px -1px var(--neutral-a4), 0 2px 1px -2px var(--black-a1),
    0 1px 3px -1px var(--black-a1);
}

@supports (color: color-mix(in oklab, white, black)) {
  :where(:root), :where([data-neutral]) {
    --card-surface-box-shadow: 0 0 0 1px
      color-mix(in oklab, var(--neutral-a5), var(--neutral-5) 25%);
    --card-surface-hover-box-shadow: 0 0 0 1px
      color-mix(in oklab, var(--neutral-a7), var(--neutral-7) 25%);
    --card-surface-active-box-shadow: 0 0 0 1px
      color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%);
  }
}

:is(.dark, .dark-theme), :is(.dark, .dark-theme) :where([data-neutral]:not(.light, .light-theme)) {
  --card-elevated-box-shadow-inner: 0 0 0 1px var(--neutral-a6), 0 0 0 1px transparent,
    0 0 0 .5px var(--black-a3), 0 1px 1px 0 var(--black-a6),
    0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
  --card-elevated-box-shadow-outer: 0 0 0 0 var(--neutral-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
    0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
    0 1px 3px -1px var(--black-a5);
  --card-elevated-hover-box-shadow-inner: 0 0 0 1px var(--neutral-a6), 0 0 1px 1px var(--neutral-a4),
    0 0 1px -1px var(--neutral-a4), 0 0 3px -2px var(--neutral-a3),
    0 0 12px -2px var(--neutral-a3), 0 0 16px -8px var(--neutral-a7);
  --card-elevated-hover-box-shadow-outer: 0 0 0 0 var(--neutral-a6), 0 0 1px 0 var(--neutral-a4),
    0 0 1px -2px var(--neutral-a4), 0 0 3px -3px var(--neutral-a3),
    0 0 12px -3px var(--neutral-a3), 0 0 16px -9px var(--neutral-a7);
  --card-elevated-active-box-shadow-inner: 0 0 0 1px var(--neutral-a6), 0 0 0 1px transparent,
    0 0 0 .5px var(--black-a3), 0 1px 1px 0 var(--black-a6),
    0 2px 1px -1px var(--black-a6), 0 1px 3px 0 var(--black-a5);
  --card-elevated-active-box-shadow-outer: 0 0 0 0 var(--neutral-a6), 0 0 0 0 transparent, 0 0 0 0 var(--black-a3),
    0 1px 1px -1px var(--black-a6), 0 2px 1px -2px var(--black-a6),
    0 1px 3px -1px var(--black-a5);
}

.x-card, .x-card:where([data-variant="surface"]) {
  --card-border-width: 1px;
}

:is(.x-card, .x-card:where([data-variant="surface"])):before {
  background-color: var(--color-material, var(--color-surface));
  -webkit-backdrop-filter: var(--backdrop-filter-material, none);
  backdrop-filter: var(--backdrop-filter-material, none);
}

:is(.x-card, .x-card:where([data-variant="surface"])):after {
  box-shadow: var(--card-surface-box-shadow);
}

@media (hover: hover) {
  :is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:hover):after {
    box-shadow: var(--card-surface-hover-box-shadow);
  }
}

:is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where([data-state="open"]):after {
  box-shadow: var(--card-surface-hover-box-shadow);
}

:is(.x-card, .x-card:where([data-variant="surface"])):where(:any-link, button, label):where(:active:not([data-state="open"])):after {
  box-shadow: var(--card-surface-active-box-shadow);
}

.x-card:where([data-variant="elevated"]) {
  --card-border-width: 1px;
  box-shadow: var(--card-elevated-box-shadow-outer);
  transition: box-shadow .12s;
}

.x-card:where([data-variant="elevated"]):before {
  background-color: var(--color-material, var(--color-surface));
  -webkit-backdrop-filter: var(--backdrop-filter-material, none);
  backdrop-filter: var(--backdrop-filter-material, none);
}

.x-card:where([data-variant="elevated"]):after {
  box-shadow: var(--card-elevated-box-shadow-inner);
}

@media (hover: hover) {
  .x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover) {
    box-shadow: var(--card-elevated-hover-box-shadow-outer);
    transition-duration: 40ms;
  }

  .x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:hover):after {
    box-shadow: var(--card-elevated-hover-box-shadow-inner);
  }
}

.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where([data-state="open"]) {
  box-shadow: var(--card-elevated-hover-box-shadow-outer);
  transition-duration: 40ms;
}

.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where([data-state="open"]):after {
  box-shadow: var(--card-elevated-hover-box-shadow-inner);
}

.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
  box-shadow: var(--card-elevated-active-box-shadow-outer);
  transition-duration: 40ms;
}

.x-card:where([data-variant="elevated"]):where(:any-link, button, label):where(:active:not([data-state="open"])):after {
  box-shadow: var(--card-elevated-active-box-shadow-inner);
}

.x-card:where([data-variant="borderless"]) {
  --card-border-width: 0px;
}

.x-card:where([data-variant="borderless"]):before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background-color: #0000;
}

.x-card:where([data-variant="borderless"]):after {
  box-shadow: none;
}

@media (hover: hover) {
  .x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:hover) {
    background-color: var(--neutral-a3);
  }
}

.x-card:where([data-variant="borderless"]):where(:any-link, button, label):where([data-state="open"]) {
  background-color: var(--neutral-a3);
}

.x-card:where([data-variant="borderless"]):where(:any-link, button, label):where(:active:not([data-state="open"])) {
  background-color: var(--neutral-a4);
}

.x-card:where(:focus-visible) {
  outline: 2px solid var(--focus-8);
  outline-offset: -1px;
}

.x-card:where(:focus-visible):after {
  outline: inherit;
}

.x-card:where(:focus-visible):where(:active:not([data-state="open"])):before {
  background-image: linear-gradient(var(--focus-a2), var(--focus-a2));
}

.x-card > [data-inset] {
  --inset-radius: calc(var(--card-border-radius) - var(--card-border-width));
  box-sizing: border-box;
  overflow: hidden;
}

.x-card > [data-inset="top"] {
  border-start-start-radius: var(--inset-radius);
  border-start-end-radius: var(--inset-radius);
  border-end-end-radius: 0;
  border-end-start-radius: 0;
  margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
      var(--card-border-width));
  margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
      var(--card-border-width));
  margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
      var(--card-border-width));
}

.x-card > [data-inset="bottom"] {
  border-start-start-radius: 0;
  border-start-end-radius: 0;
  border-end-end-radius: var(--inset-radius);
  border-end-start-radius: var(--inset-radius);
  margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
      var(--card-border-width));
  margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
      var(--card-border-width));
  margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
      var(--card-border-width));
}

.x-card > [data-inset="start"] {
  border-start-start-radius: var(--inset-radius);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  border-end-start-radius: var(--inset-radius);
  margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
      var(--card-border-width));
  margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
      var(--card-border-width));
  margin-inline-start: calc(0px - var(--card-padding-inline-start, var(--card-padding)) +
      var(--card-border-width));
}

.x-card > [data-inset="end"] {
  border-start-start-radius: 0;
  border-start-end-radius: var(--inset-radius);
  border-end-end-radius: var(--inset-radius);
  border-end-start-radius: 0;
  margin-block-start: calc(0px - var(--card-padding-block-start, var(--card-padding)) +
      var(--card-border-width));
  margin-block-end: calc(0px - var(--card-padding-block-end, var(--card-padding)) +
      var(--card-border-width));
  margin-inline-end: calc(0px - var(--card-padding-inline-end, var(--card-padding)) +
      var(--card-border-width));
}