:host {
  display: block;
  --selectable-item-border-color: var(--joy-color-neutral-30);
  --selectable-item-text-color: var(--joy-color-neutral-60);
  --selectable-item-transition-timing: var(--joy-transition-duration-short);
  --selectable-item-background-color: white;
  --selectable-item-font-size: var(--joy-font-size-primary-300);
  --selectable-item-flex-rule: 0 0 215px;
  --selectable-item-min-height: 54px;
}

:host([data-choice=single]) {
  flex: var(--selectable-item-flex-rule);
}

:host([full-width]) {
  --selectable-item-flex-rule: 1;
}

.joy-selectable-item__wrapper {
  position: relative;
  height: 100%;
}
.joy-selectable-item__wrapper .joy-selectable-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  padding: 0;
  border-radius: var(--joy-core-radius-3);
  border: var(--joy-form-border-width) solid var(--selectable-item-border-color);
  cursor: pointer;
  color: var(--selectable-item-text-color);
  background-color: var(--selectable-item-background-color);
  transition: all var(--selectable-item-transition-timing) var(--joy-transition-timing-function);
  font-size: var(--selectable-item-font-size);
  font-family: var(--joy-font-family-base);
  font-weight: var(--joy-font-weight-normal);
  user-select: none;
  height: 100%;
}
.joy-selectable-item__wrapper .joy-selectable-item:not(.joy-selectable-item__wrapper .joy-selectable-item--disabled):hover {
  --selectable-item-border-color: var(--joy-color-secondary-50);
}
.joy-selectable-item__wrapper .joy-selectable-item--disabled {
  cursor: not-allowed;
}
.joy-selectable-item__wrapper .joy-selectable-item--single {
  padding: var(--joy-core-spacing-3);
  min-height: var(--selectable-item-min-height);
  height: 100%;
}
.joy-selectable-item__wrapper .joy-selectable-item ::slotted(strong) {
  display: block;
  width: 100%;
  font-weight: var(--joy-font-weight-bold);
}
.joy-selectable-item__wrapper .joy-selectable-item ::slotted(joy-checkbox) {
  --checkbox-label-margin: 0;
  --checkbox-label-padding: var(--joy-core-spacing-4);
  box-sizing: border-box;
  min-height: calc(var(--selectable-item-min-height) - 4px);
}
.joy-selectable-item__wrapper .joy-selectable-item ::slotted([slot=selectable-item-sublabel]) {
  display: block;
  width: 100%;
  font-weight: var(--joy-font-weight-normal);
}
.joy-selectable-item__wrapper input[type=radio] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.joy-selectable-item__wrapper .joy-selectable-item--checked,
.joy-selectable-item__wrapper .joy-selectable-item--multiple.joy-selectable-item--checked {
  --selectable-item-border-color: var(--joy-color-secondary-50);
  color: var(--joy-color-secondary-50);
  font-weight: var(--joy-font-weight-bold);
}
.joy-selectable-item__wrapper .joy-selectable-item--checked ::slotted([slot=selectable-item-sublabel]),
.joy-selectable-item__wrapper .joy-selectable-item--multiple.joy-selectable-item--checked ::slotted([slot=selectable-item-sublabel]) {
  font-weight: var(--joy-font-weight-normal);
}
.joy-selectable-item__wrapper input:focus-visible ~ .joy-selectable-item:after {
  content: "";
  border-radius: var(--joy-core-radius-2);
  width: 102%;
  height: 110%;
  position: absolute;
  left: -2%;
  top: -7%;
  border: 2px solid var(--joy-color-neutral-70);
}
.joy-selectable-item__wrapper input:disabled ~ .joy-selectable-item {
  --selectable-item-text-color: var(--joy-color-neutral-40);
  --selectable-item-background-color: var(--joy-color-neutral-20);
}