2024-11-09 13:12:16 +07:00

73 lines
1.3 KiB
CSS

.card-number {
--codex-card-number-label-color: #7b7b7b;
--codex-card-number-unit-color: #969696;
&[aria-invalid] {
--codex-card-number-label-color: var(--codex-input-color-error);
--codex-card-number-unit-color: var(--codex-input-color-error);
}
position: relative;
label {
color: var(--codex-card-number-label-color);
}
input {
font-family: Inter;
font-size: 24px;
font-weight: 500;
line-height: 32px;
letter-spacing: -0.015em;
width: 100%;
background-color: transparent;
&::-webkit-outer-spin-button,
&::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
& {
-moz-appearance: textfield;
}
}
.tooltip {
position: absolute;
right: 0px;
top: 0px;
}
svg {
color: var(--codex-card-number-unit-color);
}
/* svg::after {
content: attr(data-title);
background-color: #2f2f2f;
color: #fff;
padding: 8px;
border-radius: 4px;
font-size: 12px;
line-height: 14px;
display: block;
white-space: nowrap;
position: absolute;
right: 1rem;
overflow: visible;
} */
span {
font-family: Inter;
font-size: 12px;
font-weight: 400;
line-height: 16px;
text-align: left;
color: var(--codex-card-number-unit-color);
position: absolute;
top: 54px;
right: 16px;
}
}