108 lines
2.2 KiB
CSS
108 lines
2.2 KiB
CSS
.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;
|
|
}
|
|
}
|