.radioButtons {
  display: flex;
  gap: var(--Space-x2);
  flex-direction: column;
}

.option {
  position: relative;
  background: var(--Surface-Primary-Default);
  padding: var(--Space-x15) var(--Space-x2);
  outline: 1px solid var(--Border-Interactive-Default);
  border-radius: var(--Corner-radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Space-x2);
  cursor: pointer;
  width: 100%;
  align-items: flex-start;
}

.option.hovered {
  background:
    linear-gradient(
      0deg,
      var(--Surface-Primary-Hover, rgba(31, 28, 27, 0.05)) 0%,
      var(--Surface-Primary-Hover, rgba(31, 28, 27, 0.05)) 100%
    ),
    var(--Surface-Primary-Default);
}

.option.focused {
  outline: 2px solid var(--UI-Input-Controls-Border-Focus);
  outline-offset: 2px;
}

.option.disabled {
  outline: 1px solid var(--Border-Interactive-Disabled);
  background:
    linear-gradient(
      0deg,
      var(--Surface-UI-Fill-Disabled, rgba(31, 28, 27, 0.1)) 0%,
      var(--Surface-UI-Fill-Disabled, rgba(31, 28, 27, 0.1)) 100%
    ),
    var(--Surface-Primary-Default, #fff);
  color: var(--Text-Interactive-Disabled);
  cursor: not-allowed;
}

.option.selected {
  color: var(--Text-Default);
}

.option.selected:not(.disabled) {
  outline: 2px solid var(--Border-Interactive-Active);
  background: var(--Surface-Primary-Default);
}

.card {
  display: grid;
  gap: var(--Space-x2);
  width: 100%;
}

.radio {
  width: 24px;
  height: 24px;
  border: 1px solid var(--Border-Interactive-Default);
  border-radius: 50%;
  cursor: pointer;
  background-color: var(--Surface-UI-Fill-Default);
  background: var(--Surface-UI-Fill-Default);
}

.radio.selected {
  border: 8px solid var(--Surface-UI-Fill-Active);
}

.radio.disabled {
  background-color: var(--Surface-UI-Fill-Disabled);
}

.titleContainer {
  display: flex;
  align-items: center;
  gap: var(--Space-x15);
}

.bottom {
  display: grid;
  gap: var(--Space-x1);
  color: var(--Text-Secondary);
}

.selected .bottom {
  color: var(--Text-Default);
}

.disabled:not(.selected) .bottom {
  color: var(--Text-Interactive-Disabled);
}

@media (min-width: 768px) {
  .radioButtons {
    flex-direction: row;
  }
}