@value (colorBackgroundTertiary, colorFillPrimary, colorBorderSecondary, colorFocusPrimary) from '../../styles/variables/_color.css';
@value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
@value (spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';

.cardWrapper {
  --card-padding-top: spaceMedium;
  --card-padding-right: spaceMedium;
  --card-padding-bottom: spaceMedium;
  --card-padding-left: spaceMedium;
  display: flex;
  composes: borderPrimary from '../../styles/border.module.css';
  background-color: colorBackgroundTertiary;
  border-radius: borderRadiusMedium;
  padding-top: var(--card-padding-top);
  padding-right: var(--card-padding-right);
  padding-bottom: var(--card-padding-bottom);
  padding-left: var(--card-padding-left);
}

.clickableCard {
  cursor: pointer;
  outline: none;
}
.clickableCard.disabled {
  pointer-events: none;
}

.clickableCard:hover {
  border-color: colorBorderSecondary;
}

.clickableCard:focus-within {
  border-color: colorFillPrimary;
  box-shadow: borderWidthNone borderWidthNone borderWidthNone
    borderWidthTertiary colorFocusPrimary;
}