:host {
  display: contents;
}

  :host * {
    box-sizing: border-box;
  }

.card {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  border: var(--s-border-width-default) solid var(--s-border-default);
  border-radius: var(--s-border-radius-base);
  color: var(--s-text-default);
  background-color: var(--swirl-card-background-default);
  font: inherit;
  text-decoration: none;
  flex-direction: column;
  transition: background-color 0.2s;
}

.card:not(.card--has-image) .card__image {
      overflow: hidden;
      height: 0;
    }

a.card,
button.card,
.card--interactive {
  cursor: pointer;
}

a.card:hover, button.card:hover, .card--interactive:hover {
    --swirl-avatar-background-color: var(--s-surface-raised-hovered);

    background-color: var(--swirl-card-background-hovered);
  }

a.card:active, button.card:active, .card--interactive:active {
    --swirl-avatar-background-color: var(--s-surface-raised-pressed);

    background-color: var(--swirl-card-background-pressed);
  }

a.card:focus:not(:focus-visible), button.card:focus:not(:focus-visible), .card--interactive:focus:not(:focus-visible) {
    outline: none;
  }

a.card:focus-visible, button.card:focus-visible, .card--interactive:focus-visible {
    outline-color: var(--s-focus-default);
    outline-offset: var(--s-space-4);
  }

.card--is--borderless {
  border: 0;
}

.card--elevated.card--elevation-level-1 {
    box-shadow: var(--s-shadow-level-1);
  }

.card--elevated.card--elevation-level-2 {
    box-shadow: var(--s-shadow-level-2);
  }

.card--elevated.card--elevation-level-3 {
    box-shadow: var(--s-shadow-level-3);
  }

.card--flashing {
  background-color: var(--swirl-card-background-pressed);
}

.card--flashing.card--intent-default-subdued {
    background-color: var(--s-surface-raised-pressed);
  }

.card--flashing.card--intent-highlight {
    background-color: var(--s-surface-highlight-pressed);
  }

.card--highlighted {
  border-width: 0.1875rem;
  border-color: var(--s-border-highlight);
}

.card--justify-content-start .card__body {
    justify-content: flex-start;
  }

.card--justify-content-center .card__body {
    justify-content: center;
  }

.card--justify-content-end .card__body {
    justify-content: flex-end;
  }

.card--intent-critical-subdued {
  background-color: var(--s-surface-critical-subdued);
}

.card--intent-default-subdued {
  background-color: var(--s-surface-raised-default);
}

.card--intent-info-subdued {
  background-color: var(--s-surface-info-subdued);
}

.card--intent-success-subdued {
  background-color: var(--s-surface-success-subdued);
}

.card--intent-warning-subdued {
  background-color: var(--s-surface-warning-subdued);
}

.card--intent-highlight {
  color: var(--s-text-on-surface-highlight);
  background-color: var(--s-surface-highlight-default);
}

.card--translucent {
  background-color: transparent;
}

.card--translucent:before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--s-translucent-low-default);
    -webkit-backdrop-filter: blur(var(--s-blur-l));
            backdrop-filter: blur(var(--s-blur-l));
    border-radius: inherit;
  }

.card--has-floating-controls:focus-within .card__floating-controls,
  .card--has-floating-controls:hover .card__floating-controls {
    pointer-events: auto;
    opacity: 1;
  }

.content-section {
  padding: 0 var(--s-space-16);
}

.card__image {
  overflow: hidden;
  min-height: 0;
}

.card__image ::slotted(img) {
    display: inline-flex;
    width: 100%;
    max-height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

.card__floating-controls {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  padding: var(--s-space-12);
  transition: opacity 0.2s;
  pointer-events: none;
  opacity: 0;
}

.card__body {
  display: flex;
  min-height: 0;
  padding: var(--s-space-12) var(--s-space-16) var(--s-space-16);
  flex-grow: 1;
  flex-direction: column;
  gap: var(--s-space-16);
}

.card__content {
  min-height: 100%;
}

@media print {
  .card {
    overflow: visible;
    height: auto;
    min-height: -webkit-fit-content;
    min-height: -moz-fit-content;
    min-height: fit-content;
  }

  .card__body {
    min-height: auto;
    flex-grow: 0;
  }

  .card__content {
    min-height: auto;
  }
}