Files
web/packages/design-system/lib/components/Form/PaymentOption/paymentOption.module.css
Linus Flood 7fb95f436b Merged in feat/book-522-align (pull request #3101)
feat(BOOK-522): align items in topmenu, header and booking widget

* feat(BOOK-522): align items in topmenu, header and booking widget

* Delete old css variable and use new

* Fixed underline on icons


Approved-by: Erik Tiekstra
2025-11-07 11:06:56 +00:00

42 lines
854 B
CSS

.paymentOption {
position: relative;
background-color: var(--UI-Input-Controls-Surface-Normal);
padding: var(--Space-x15) var(--Space-x2);
border: 1px solid var(--Base-Border-Normal);
border-radius: var(--Corner-radius-md);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--Spacing-x2);
cursor: pointer;
}
.paymentOption.focused {
outline: 2px solid var(--UI-Input-Controls-Border-Focus);
outline-offset: 2px;
}
.radio {
width: 24px;
height: 24px;
border: 1px solid var(--Base-Border-Normal);
border-radius: 50%;
cursor: pointer;
}
.radio.selected {
border: 8px solid var(--Surface-UI-Fill-Active);
}
.titleContainer {
display: flex;
align-items: center;
gap: var(--Space-x15);
}
.paymentOptionIcon {
position: absolute;
right: var(--Spacing-x3);
top: calc(50% - 16px);
}