.filterable-card {
  background-color: var(--gray-100);
  align-items: start;
  position: relative;
  padding: var(--spacing-5) var(--spacing-8);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.filterable-card.notice {
  --shadow-color: var(--purple-100);
  --border-color: var(--purple-400);
  --outline-color: var(--purple-50);
  --icon-color: var(--purple-600);
}

.filterable-card.info {
  --shadow-color: var(--blue-light-100);
  --border-color: var(--blue-light-400);
  --outline-color: var(--blue-light-50);
  --icon-color: var(--blue-light-600);
}

.filterable-card.success {
  --shadow-color: var(--success-100);
  --border-color: var(--success-400);
  --outline-color: var(--success-50);
  --icon-color: var(--success-600);
}

.filterable-card.warning {
  --shadow-color: var(--warning-100);
  --border-color: var(--warning-400);
  --outline-color: var(--warning-50);
  --icon-color: var(--warning-600);
}

.filterable-card.error {
  --shadow-color: var(--error-100);
  --border-color: var(--error-400);
  --outline-color: var(--error-50);
  --icon-color: var(--error-600);
}

.filterable-card__header {
  gap: var(--spacing-2);
}

.filterable-card__header i {
  border: none;
  color: var(--icon-color);
}

.filterable-card__footer-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 6px;
  width: 100%;
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  background-color: var(--border-color);
}

.filterable-card.selected {
  box-shadow: 0 0 0 4px var(--shadow-color);
  border: var(--border-width-thin) solid var(--border-color);
  background-color: var(--outline-color);
}