card.scss

/**
 * CSS Custom Properties
 *
 * These properties can be overridden using the component's tag as selector.
 *
 * @prop --calcite-card-accent-color-selected: Specifies the component's accent color when `selected`.
 * @prop --calcite-card-background-color: Specifies the component's background color.
 * @prop --calcite-card-border-color: Specifies the component's border color.
 * @prop --calcite-card-corner-radius: Specifies the component's corner radius.
 * @prop --calcite-card-selection-background-color-active: [Deprecated] Use `--calcite-card-selection-background-color-press`. Specifies the component's selection element background color when active.
 * @prop --calcite-card-selection-background-color-hover: Specifies the component's selection element background color when hovered.
 * @prop --calcite-card-selection-background-color-press: Specifies the component's selection element background color when active.
 * @prop --calcite-card-selection-background-color-selected: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element icon color when `selected`.
 * @prop --calcite-card-selection-background-color: [Deprecated] Use `--calcite-card-background-color`. Specifies the component's selection element background color.
 * @prop --calcite-card-selection-color-hover: Specifies the component's selection element color when hovered or focused.
 * @prop --calcite-card-selection-color: Specifies the component's selection element color.
 * @prop --calcite-card-selection-icon-color-hover: [Deprecated] Use `--calcite-card-selection-color-hover`. Specifies the component's selection element icon color when hovered.
 * @prop --calcite-card-selection-icon-color-selected: [Deprecated] Use `--calcite-card-accent-color-selected`. Specifies the component's selection element icon color when `selected`.
 * @prop --calcite-card-selection-icon-color: [Deprecated] Use `--calcite-card-selection-color`. Specifies the component's selection element icon color.
 * @prop --calcite-card-shadow: Specifies the component's shadow.
 *
 */

:host {
  @apply block max-w-full;
}

.content-wrapper {
  @apply relative
    flex
    h-full
    flex-col
    justify-between
    overflow-hidden;
  border: var(--calcite-border-width-sm) solid var(--calcite-card-border-color, var(--calcite-color-border-3));
  border-radius: var(--calcite-card-corner-radius, var(--calcite-corner-radius-sharp));
  background-color: var(--calcite-card-background-color, var(--calcite-color-foreground-1));
  box-shadow: var(--calcite-card-shadow, var(--calcite-shadow-none));
  pointer-events: none;
}

::slotted(*) {
  @apply pointer-events-auto;
}

:host(:not([selectable])) {
  .content-wrapper {
    &:not(.non-interactive) {
      @apply focus-base;
    }
    &:not(.non-interactive):focus {
      @apply focus-outset;
    }
  }
}

.container {
  @apply relative flex flex-auto flex-col;
}

:host([loading]) .content-wrapper *:not(calcite-loader):not(.calcite-card-loader-container) {
  @apply pointer-events-none;
  opacity: $calcite-opacity-0;
}

:host([loading]) .calcite-card-loader-container {
  @apply absolute inset-0 flex items-center;
}

.header {
  @apply flex flex-row items-start;
}

.footer {
  @apply flex mt-auto flex-row content-between justify-between;
  padding-inline: var(--calcite-spacing-md);
  padding-block-start: var(--calcite-spacing-xxs);
  padding-block-end: var(--calcite-spacing-md);
}

.header-text-container {
  @apply flex flex-col px-3 py-2 w-full justify-center;
  &:not(:only-child) {
    @apply pr-0.5;
  }
}

.footer {
  @apply mt-auto flex-row content-between
    justify-between
    px-3
    pt-1
    pb-3;
}

.card-content {
  @apply h-auto text-n2-wrap;
}

.has-slotted-content {
  @apply p-3;
}

:host([selected]) .content-wrapper {
  box-shadow: inset 0 -4px 0 0 var(--calcite-card-accent-color-selected, var(--calcite-color-brand));
}

:host([selectable]) .header {
  padding-inline-end: var(--calcite-spacing-xxxl);
}

@include slotted("title", "*") {
  @apply text-color-1
    text-n1-wrap
    m-0
    font-medium;
}

@include slotted("subtitle", "*") {
  @apply text-color-2
    text-n2-wrap
    m-0 mt-0.5
    font-normal;
}

@include slotted("heading", "*") {
  @apply text-color-1
    text-n1-wrap
    m-0
    font-medium;
}

@include slotted("description", "*") {
  @apply text-color-2
    text-n2-wrap
    m-0 mt-0.5
    font-normal;
}

@include slotted("thumbnail", "img") {
  @apply min-w-full max-w-full;
}

@include slotted("footer-start", "*") {
  @apply text-n2-wrap self-center;
  margin-inline-end: auto;
}

@include slotted("footer-end", "*") {
  @apply text-n2-wrap self-center;
}

// deprecated
.checkbox-wrapper-deprecated {
  @apply absolute pointer-events-auto;
  inset-block-start: var(--calcite-spacing-sm);
  inset-inline-end: var(--calcite-spacing-sm);
  margin: 0;
  padding: 0;
  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));

  &:hover {
    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));
    color: var(
      --calcite-card-selection-color-hover,
      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))
    );
  }
  &:active {
    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));
  }
}

.checkbox-wrapper {
  @apply m-2 p-2 focus-base cursor-pointer pointer-events-auto;
  display: flex;
  align-items: center;
  justify-items: center;
  color: var(--calcite-card-selection-color, var(--calcite-color-text-3));

  &:hover {
    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));
    color: var(
      --calcite-card-selection-color-hover,
      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))
    );
  }
  &:active {
    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));
  }
  & calcite-icon {
    pointer-events: none;
  }
}

:host([selected]) {
  .checkbox-wrapper-deprecated,
  .checkbox-wrapper {
    color: var(
      --calcite-card-accent-color-selected,
      var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand))
    );
  }
}

:host(:not([selectable])) .content-wrapper:not(.non-interactive):focus {
  .checkbox-wrapper-deprecated,
  .checkbox-wrapper {
    background-color: var(--calcite-card-selection-background-color-hover, var(--calcite-color-foreground-2));
    color: var(
      --calcite-card-selection-color-hover,
      var(--calcite-card-selection-icon-color-hover, var(--calcite-color-text-2))
    );
  }
}

:host([selected]:not([selectable])) .content-wrapper:not(.non-interactive):focus {
  .checkbox-wrapper-deprecated,
  .checkbox-wrapper {
    background-color: var(--calcite-card-selection-background-color-press, var(--calcite-color-transparent-press));
    color: var(
      --calcite-card-accent-color-selected,
      var(--calcite-card-selection-icon-color-selected, var(--calcite-color-brand))
    );
  }
}
/* end deprecated */

.thumbnail-wrapper {
  @apply flex;
}

.content-wrapper.inline {
  @apply flex-row;

  & > .container {
    @apply w-3/5;
  }
  & > .thumbnail-wrapper {
    @apply items-start w-2/5;
  }

  @include slotted("thumbnail", "img") {
    @apply w-full;
  }
}

slot[name="footer-start"]::slotted(*),
slot[name="footer-end"]::slotted(*) {
  @apply flex gap-1;
}

@include base-component();
@include disabled();