@radix-ui/themes/src/components/checkbox-cards.css

[](https://radix-ui.com/themes)

@import './base-card.css';
@import './base-checkbox.css';

.rt-CheckboxCardsRoot {
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  cursor: default;
}

.rt-CheckboxCardsItem {
  --base-card-padding-top: var(--checkbox-cards-item-padding-top);
  --base-card-padding-right: var(--checkbox-cards-item-padding-right);
  --base-card-padding-bottom: var(--checkbox-cards-item-padding-bottom);
  --base-card-padding-left: var(--checkbox-cards-item-padding-left);
  --base-card-border-radius: var(--checkbox-cards-item-border-radius);
  --base-card-border-width: var(--checkbox-cards-item-border-width);

  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: var(--cursor-button);
  -webkit-tap-highlight-color: transparent;

  &:where(:has(:focus-visible)) {
    outline: 2px solid var(--focus-8);
    outline-offset: -1px;

    &::after {
      outline: inherit;
    }
  }

  & > * {
    /* Avoid unintentional drag interactions (e.g. on images) */
    pointer-events: none;
  }
  /* stylelint-disable-next-line selector-max-type */
  & > :where(svg) {
    /* Don’t squish icons */
    flex-shrink: 0;
  }
}

.rt-CheckboxCardCheckbox {
  position: absolute;
  right: var(--checkbox-cards-item-padding-left);
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*                Sizes                */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

.rt-CheckboxCardsItem {
  --checkbox-cards-item-padding-right: calc(
    var(--checkbox-cards-item-padding-left) * 2 + var(--checkbox-cards-item-checkbox-size)
  );
}

@breakpoints {
  .rt-CheckboxCardsRoot {
    /* 40px height for the card with one line of text */
    &:where(.rt-r-size-1) {
      font-size: var(--font-size-2);
      --line-height: var(--line-height-2);
      --letter-spacing: var(--letter-spacing-2);
      --checkbox-cards-item-padding-top: calc(var(--space-3) / 1.2);
      --checkbox-cards-item-padding-bottom: calc(var(--space-3) / 1.2);
      --checkbox-cards-item-padding-left: var(--space-3);
      --checkbox-cards-item-border-radius: var(--radius-3);
      /* keep in sync with checkbox */
      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 0.875);
    }
    /* 48px height for the card with one line of text */
    &:where(.rt-r-size-2) {
      font-size: var(--font-size-2);
      --line-height: var(--line-height-2);
      --letter-spacing: var(--letter-spacing-2);
      --checkbox-cards-item-padding-top: calc(var(--space-4) * 0.875);
      --checkbox-cards-item-padding-bottom: calc(var(--space-4) * 0.875);
      --checkbox-cards-item-padding-left: var(--space-4);
      --checkbox-cards-item-border-radius: var(--radius-3);
      /* keep in sync with checkbox */
      --checkbox-cards-item-checkbox-size: var(--space-4);
    }
    /* 64px height for the card with one line of text */
    &:where(.rt-r-size-3) {
      font-size: var(--font-size-3);
      --line-height: var(--line-height-3);
      --letter-spacing: var(--letter-spacing-3);
      --checkbox-cards-item-padding-top: calc(var(--space-5) / 1.2);
      --checkbox-cards-item-padding-bottom: calc(var(--space-5) / 1.2);
      --checkbox-cards-item-padding-left: var(--space-5);
      --checkbox-cards-item-border-radius: var(--radius-4);
      /* keep in sync with checkbox */
      --checkbox-cards-item-checkbox-size: calc(var(--space-4) * 1.25);
    }
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*         Variants / Surface          */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

:where(.rt-CheckboxCardsRoot.rt-variant-surface) {
  .rt-CheckboxCardsItem {
    --checkbox-cards-item-border-width: 1px;
    --checkbox-cards-item-background-color: var(--color-surface);

    &::before {
      background-color: var(--checkbox-cards-item-background-color);
    }
    &::after {
      box-shadow: var(--base-card-surface-box-shadow);
    }
    @media (hover: hover) {
      &:where(:not(:has(:disabled)):hover) {
        &::after {
          box-shadow: var(--base-card-surface-hover-box-shadow);
        }
      }
    }
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*         Variants / Classic          */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

:where(.rt-CheckboxCardsRoot.rt-variant-classic) {
  .rt-CheckboxCardsItem {
    --checkbox-cards-item-border-width: 1px;
    --checkbox-cards-item-background-color: var(--color-surface);

    transition: box-shadow 120ms;
    box-shadow: var(--base-card-classic-box-shadow-outer);

    &::before {
      background-color: var(--checkbox-cards-item-background-color);
    }
    &::after {
      box-shadow: var(--base-card-classic-box-shadow-inner);
    }
    @media (hover: hover) {
      &:where(:not(:has(:disabled)):hover) {
        transition-duration: 40ms;
        box-shadow: var(--base-card-classic-hover-box-shadow-outer);
        &::after {
          box-shadow: var(--base-card-classic-hover-box-shadow-inner);
        }
      }
    }
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*         All tap highlights          */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

/* Better -webkit-tap-highlight-color */
.rt-CheckboxCardsItem {
  @media (pointer: coarse) {
    &:where(:active:not(:focus-visible)) {
      &::before {
        background-image: linear-gradient(var(--gray-a4), var(--gray-a4));
      }
    }
  }
}

/* * * * * * * * * * * * * * * * * * * */
/*                                     */
/*            All disabled             */
/*                                     */
/* * * * * * * * * * * * * * * * * * * */

.rt-CheckboxCardsItem:where(:has(:disabled)) {
  cursor: var(--cursor-disabled);
  color: var(--gray-a9);

  &::before {
    background-image: linear-gradient(var(--gray-a2), var(--gray-a2));
  }
  &::selection {
    background-color: var(--gray-a5);
  }
}