@innovaccer/design-system/css/src/components/selectionCard.module.css

React components library project for Innovaccer Design System

.Selection-card {
  border-radius: var(--border-radius-10);
  position: relative;
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Selection-card--default {
  cursor: pointer;
  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
}

.Selection-card--default:hover {
  box-shadow: inset 0 0 0 var(--spacing-05) var(--inverse-lightest);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Selection-card--default:focus,
.Selection-card--default:focus-visible {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-dark);
}

.Selection-card--default:active {
  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);
  transition: var(--duration--fast-01) var(--standard-productive-curve);
}

.Selection-card--disabled {
  cursor: not-allowed;
  outline: none;
}

.Selection-card--default-disabled {
  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--secondary-lighter);
}

/* selected states */

.Selection-card--selected {
  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);
}

.Selection-card--selected:hover {
  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary-dark);
}

.Selection-card--selected:focus,
.Selection-card--selected:focus-visible {
  outline: var(--border-width-05) solid var(--primary-focus);
  outline-offset: var(--spacing-05);
  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary);
}

.Selection-card--selected:active {
  box-shadow: inset 0 0 0 var(--spacing-05) var(--primary-darker);
}

.Selection-card--selected-disabled {
  box-shadow: inset 0 0 0 var(--spacing-2-5) var(--primary-lighter);
}

/* overlay classes */

.Selection-card-overlay {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  position: absolute;
  pointer-events: none;
  border-radius: var(--border-radius-10);
}

.Selection-card--default:active .Selection-card-overlay {
  background-color: var(--primary);
  opacity: var(--opacity-3);
}

.Selection-card--default-disabled .Selection-card-overlay {
  background-color: var(--secondary-lightest);
  opacity: var(--opacity-10);
}

.Selection-card--selected .Selection-card-overlay {
  background-color: var(--primary);
  opacity: var(--opacity-1);
}

.Selection-card--selected:active .Selection-card-overlay {
  background-color: var(--primary);
  opacity: var(--opacity-1);
}

.Selection-card--selected-disabled .Selection-card-overlay {
  background-color: var(--primary-lightest);
  opacity: var(--opacity-10);
}

@media (forced-colors: active) {
  /* All states use inset box-shadow as the sole border — replace with real borders */
  .Selection-card--default,
  .Selection-card--default:hover,
  .Selection-card--default:active,
  .Selection-card--default-disabled {
    border: var(--border-width-2-5) solid ButtonText;
    box-shadow: none;
  }

  /* Interactive selected states — use Highlight to signal selection */
  .Selection-card--selected,
  .Selection-card--selected:hover,
  .Selection-card--selected:active {
    border: var(--border-width-2-5) solid Highlight;
    box-shadow: none;
  }

  .Selection-card--selected-disabled {
    border: var(--border-width-2-5) solid GrayText;
    box-shadow: none;
  }

  .Selection-card--default:focus,
  .Selection-card--default:focus-visible,
  .Selection-card--selected:focus,
  .Selection-card--selected:focus-visible {
    outline: var(--border-width-05) solid Highlight;
    outline-offset: var(--spacing-05);
    box-shadow: none;
  }

  /* Disabled: suppress the focus indicator */
  .Selection-card--disabled {
    outline: none;
  }
}