Files
web/components/TempDesignSystem/Form/Phone/phone.module.css
2024-06-13 10:00:16 +02:00

27 lines
920 B
CSS

.phone {
--react-international-phone-border-color: var(--UI-Grey-60);
--react-international-phone-border-radius: var(--Corner-radius-Small);
--react-international-phone-font-size: var(
--typography-Body-Regular-fontSize
);
--react-international-phone-height: 40px;
--react-international-phone-text-color: var(--UI-Grey-60);
}
.phone :global(.react-international-phone-input-container) {
display: grid;
/* r-i-p sets their width dynamically and doesn't respect the width property of its parent */
grid-template-columns: 470px minmax(203px, 1fr);
width: min(280px, 100%);
}
/* react-international-phone only exposes variables to change border-color */
.phone :global(.react-international-phone-country-selector-button),
.phone :global(.react-international-phone-input) {
border-width: 2px;
}
.phone :global(.react-international-phone-input) {
padding: var(--Spacing-x1) var(--Spacing-x2);
}