/**
  ---DO NOT EDIT THIS FILE DIRECTLY---
  This CSS file was concatenated from files listed in the css/ folder as part of a build process
  This is to allow for js import with @import links which will not be followed
**/

/* src/primitives/card/css/definition/content/card.css */
@layer card.definition.content.card {
  :host {
    display: inline-block;
    text-align: var(--card-text-align);
    margin: var(--card-margin);
  }
  .card {
    display: flex;
    flex-direction: var(--card-flex-direction);
    gap: var(--card-gap);
    text-decoration: none;
    border-radius: var(--card-border-radius);
    border: var(--card-border);
    transition: var(--card-transition);
    box-shadow: var(--card-box-shadow);
    background: var(--card-background);
    padding: var(--card-padding);
    width: var(--card-width);
  }
  .card > :first-child {
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .card > :last-child {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
}

/* src/primitives/card/css/definition/content/description.css */
@layer card.definition.content.description {
  ::slotted(.description),
  .description {
    color: var(--card-description-color);
    font-size: var(--card-description-font-size);
    transition: var(--card-description-transition);
    line-height: var(--card-description-line-height);
  }
}

/* src/primitives/card/css/definition/content/header.css */
@layer card.definition.content.header {
  ::slotted(.header),
  .header {
    color: var(--card-header-color);
    font-size: var(--card-header-font-size);
    font-weight: var(--card-header-font-weight);
    transition: var(--card-header-transition);
  }
}

/* src/primitives/card/css/definition/content/subheader.css */
@layer card.definition.content.subheader {
  ::slotted(.subheader),
  .subheader {
    color: var(--card-subheader-color);
    font-size: var(--card-subheader-font-size);
    font-weight: var(--card-subheader-font-weight);
    transition: var(--card-subheader-transition);
  }
}

/* src/primitives/card/css/definition/content/image.css */
@layer card.definition.content.image {
  .image {
    overflow: hidden;
    margin: var(--card-reverse-padding) var(--card-reverse-padding) 1em;
  }
  ::slotted(.image),
  ::slotted(ui-image),
  .image img {
    display: block;
    width: var(--card-image-width);
    max-width: var(--card-image-max-width);
    object-fit: contain;
  }
}

/* src/primitives/card/css/definition/content/icon.css */
@layer card.definition.content.icon {
  ::slotted(ui-icon),
  ::slotted(.icon),
  .icon ui-icon {
    font-size: var(--card-icon-font-size);
    margin: var(--card-icon-margin);
    color: var(--card-icon-color);
  }
}

/* src/primitives/card/css/definition/content/meta.css */
@layer card.definition.content.meta {
  ::slotted(.meta),
  .meta {
    margin-top: var(--card-meta-margin);
    padding-top: var(--card-meta-spacing);
    border-top: var(--card-meta-border);
    display: flex;
    gap: var(--card-meta-gap);
  }
  .meta > * {
    color: var(--card-meta-text-color);
    font-weight: bold;
  }
}

/* src/primitives/card/css/definition/states/disabled.css */
@layer card.definition.states.disabled {
  .disabled {
    pointer-events: none;
    opacity: var(--disabled-opacity);
  }
  .clickable-disabled {
    pointer-events: allowed;
  }
}

/* src/primitives/card/css/definition/plural/cards.css */
@layer card.definition.plural {
  :host(ui-cards) {
    display: block;
    container: host / inline-size;
    margin: var(--cards-margin);
  }
  .component {
    container: component / inline-size;
  }
  .cards {
    display: grid;
    gap: var(--cards-gap);
    grid-auto-rows: 1fr;
    width: 100%;
  }
  ::slotted(ui-card) {
    display: contents;
    margin: 0;
  }
}

/* src/primitives/card/css/definition/variations/basic.css */
@layer card.definition.variations.basic {
  .basic.card {
    background: var(--card-basic-background);
    box-shadow: var(--card-basic-box-shadow);
    border: var(--card-basic-border);
  }
}

/* src/primitives/card/css/definition/variations/count.css */
@layer card.definition.variations.count {
  .cards.one {
    grid-template-columns: 1fr;
  }
  .cards.two {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards.three {
    grid-template-columns: repeat(3, 1fr);
  }
  .cards.four {
    grid-template-columns: repeat(4, 1fr);
  }
  .cards.five {
    grid-template-columns: repeat(5, 1fr);
  }
  .cards.six {
    grid-template-columns: repeat(6, 1fr);
  }
  .cards.seven {
    grid-template-columns: repeat(7, 1fr);
  }
  .cards.eight {
    grid-template-columns: repeat(8, 1fr);
  }
  .cards ::slotted(*) {
    --card-width: none;
  }
}

/* src/primitives/card/css/definition/variations/fluid.css */
@layer card.definition.variations.fluid {
  :host([fluid]),
  .fluid.card {
    --card-width: auto;
    --card-image-max-width: none;
  }
}

/* src/primitives/card/css/definition/variations/horizontal.css */
@layer card.definition.variations.horizontal {
  .horizontal {
    flex-direction: var(--card-horizontal-flex-direction);
    gap: var(--card-horizontal-gap);
    text-align: left;
  }
  .horizontal ::slotted(.image),
  .horizontal ::slotted(ui-image),
  .horizontal .image {
    margin: var(--card-reverse-padding);
    max-width: var(--card-horizontal-image-max-width);
  }
  .horizontal ::slotted(ui-icon),
  .horizontal ::slotted(.icon),
  .horizontal .icon ui-icon {
    font-size: var(--card-horizontal-icon-font-size);
    margin: var(--card-horizontal-icon-margin);
  }
  .horizontal ::slotted(.header),
  .horizontal .header {
    font-size: var(--card-horizontal-header-size);
  }
  .horizontal :first-child {
    border-radius: inherit;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .horizontal :last-child {
    border-radius: inherit;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* src/primitives/card/css/definition/variations/link.css */
@layer card.definition.variations.link {
  .link.card,
  a.card {
    cursor: pointer;
    color: inherit;
  }
  .link.card:hover,
  a.card:hover {
    background: var(--card-link-hover-background);
    box-shadow: var(--card-link-hover-box-shadow);
    border: var(--card-link-hover-border);
  }
  .link.card:hover ::slotted(.header),
  .link.card:hover .header,
  a.card:hover ::slotted(.header),
  a.card:hover .header {
    color: var(--card-link-hover-header-color);
  }
  .link.card:hover ::slotted(ui-icon),
  .link.card:hover ::slotted(.icon),
  .link.card:hover .icon ui-icon,
  a.card:hover ::slotted(ui-icon),
  a.card:hover ::slotted(.icon),
  a.card:hover .icon ui-icon {
    color: var(--card-link-hover-icon-color);
  }
}

/* src/primitives/card/css/definition/variations/spaced.css */
@layer card.definition.variations.spaced {
  .cards.spaced {
    gap: var(--cards-spaced-gap);
  }
  .cards.very-spaced {
    gap: var(--cards-very-spaced-gap);
  }
}

/* src/primitives/card/css/definition/variations/doubling.css */
@layer card.definition.variations.doubling {
  @container component (max-width: var(--card-doubling-breakpoint)) {
    .doubling.cards {
    }
  }
}

/* src/primitives/card/css/definition/variations/stackable.css */
@layer card.definition.variations.stackable {
  .component {
    --card-stackable-comparison: max(calc(100cqi - var(--card-stackable-breakpoint)), 0px);
    width: --card-stackable-comparison;
  }
  @container component style(--card-stackable-comparison: 0) {
    .stackable.cards {
      display: flex;
      flex-direction: column;
    }
  }
}

/* src/primitives/card/css/definition/card-definition.css */

/* src/primitives/card/css/theme/content/card-variables.css */
@layer card.theme.content.card {
  :host {
    --card-margin: 0px 5px 5px 0px;
    --card-text-align: center;
    --card-padding: var(--spacing);
    --card-reverse-padding: calc(var(--spacing) * -1);
    --card-flex-direction: column;
    --card-border-radius: var(--border-radius);
    --card-transition: var(--transition);
    --card-background: var(--ui-background-emphasis);
    --card-box-shadow: 0px 0px 5px var(--standard-5);
    --card-text-align: center;
    --card-border: var(--internal-border);
    --card-gap: 0;
    --card-width: 290px;
  }
}

/* src/primitives/card/css/theme/content/description-variables.css */
@layer card.theme.content.description {
  :host {
    --card-description-font-size: var(--relative-15px);
    --card-description-color: var(--standard-60);
    --card-description-line-height: inherit;
    --card-description-transition: var(--transition);
  }
}

/* src/primitives/card/css/theme/content/header-variables.css */
@layer card.theme.content.header {
  :host {
    --card-header-font-size: var(--relative-20px);
    --card-header-font-weight: var(--bold);
    --card-header-transition: var(--transition);
    --card-header-color: var(--standard-100);
  }
}

/* src/primitives/card/css/theme/content/subheader-variables.css */
@layer card.theme.content.subheader {
  :host {
    --card-subheader-font-size: var(--relative-16px);
    --card-subheader-font-weight: var(--bold);
    --card-subheader-transition: var(--transition);
    --card-subheader-color: var(--standard-80);
  }
}

/* src/primitives/card/css/theme/content/image-variables.css */
@layer card.theme.content.image {
  :host {
    --card-image-margin: -1.5em -1.5em 1.5em;
    --card-image-width: 100%;
    --card-image-max-width: 100%;
  }
}

/* src/primitives/card/css/theme/content/icon-variables.css */
@layer card.theme.content.icon {
  :host {
    --card-icon-font-size: var(--relative-32px);
    --card-icon-color: var(--standard-40);
    --card-icon-margin: 0 0 var(--compact-spacing) 0;
  }
}

/* src/primitives/card/css/theme/content/meta-variables.css */
@layer card.theme.content.meta {
  :host {
    --card-meta-margin: var(--compact-spacing) 0 0;
    --card-meta-padding: var(--compact-spacing) 0 0;
    --card-meta-border: var(--border);
    --card-meta-gap: var(--compact-spacing);
    --card-meta-text-color: var(--standard-90);
  }
}

/* src/primitives/card/css/theme/plural/cards-variables.css */
@layer card.theme.plural {
  :host {
    --cards-gap: var(--spacing);
    --cards-margin: var(--vertical-spacing);
  }
}

/* src/primitives/card/css/theme/variations/basic-variables.css */
@layer card.theme.variations.basic {
  :host {
    --card-basic-background: transparent;
    --card-basic-box-shadow: var(--floating-shadow);
    --card-basic-border: var(--card-border);
  }
}

/* src/primitives/card/css/theme/variations/count-variables.css */
@layer card.theme.variations.count;

/* src/primitives/card/css/theme/variations/fluid-variables.css */
@layer card.theme.variations.fluid {
  :host {
  }
}

/* src/primitives/card/css/theme/variations/horizontal-variables.css */
@layer card.theme.variations.horizontal {
  :host {
    --card-horizontal-flex-direction: row;
    --card-horizontal-gap: var(--padding);
    --card-horizontal-image-max-width: 125px;
    --card-horizontal-icon-size: var(--massive);
    --card-horizontal-icon-margin: 0 0 0 var(--spacing);
    --card-horizontal-header-size: var(--large);
    --card-horizontal-icon-font-size: var(--massive);
  }
}

/* src/primitives/card/css/theme/variations/link-variables.css */
@layer card.theme.variations.link {
  :host {
    --card-link-hover-background: oklch(0.98 0.01 227.13);
    --card-link-hover-box-shadow: 0px 0px 5px var(--standard-5);
    --card-link-hover-border: 1px solid var(--primary-text-color);
    --card-link-hover-header-color: var(--primary-text-color);
    --card-link-hover-icon-color: var(--primary-text-color);
  }
  @container style(--dark-mode: true) {
    .card {
      --card-link-hover-background: oklch(0.17 0.04 225.68);
      --card-link-hover-box-shadow: oklch(0.58 0.14 233.34 / 0.25) 0px 0px 7px 2px;
      --card-link-hover-border: 1px solid var(--primary-text-color);
    }
  }
}

/* src/primitives/card/css/theme/variations/spaced-variables.css */
@layer card.theme.variations.spaced {
  :host {
    --cards-spaced-gap: 2rem;
    --cards-very-spaced-gap: 3rem;
  }
}

/* src/primitives/card/css/theme/variations/doubling-variables.css */
@layer card.theme.variations.doubling {
  :host {
  }
}

/* src/primitives/card/css/theme/variations/stackable-variables.css */
@layer card.theme.variations.stackable {
  @property --card-stackable-comparison { syntax: "<length>"; inherits: true; initial-value: 1px; }
  :host {
    --card-stackable-breakpoint: var(--largest-mobile-screen);
  }
}

/* src/primitives/card/css/theme/card-theme.css */

/* src/primitives/card/css/card.css */