.recipient-form {
--options-border-radius: var(--variant-picker-button-radius);
--options-border-width: var(--variant-picker-button-border-width);
display: flex;
flex-direction: column;
color: var(--color, var(--color-foreground));
padding-bottom: var(--padding-2xl);
}
.recipient-form__send-to {
padding: 0;
margin-block-end: var(--margin-xs);
}
.gift-card-form-option {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gap-sm);
padding: 0;
border: none;
}
.gift-card-form-option__button-label {
display: flex;
align-items: center;
position: relative;
padding-block: var(--padding-sm);
padding-inline: var(--padding-lg);
border: var(--style-border-width) solid var(--color-variant-border);
border-radius: var(--options-border-radius);
border-width: var(--options-border-width);
overflow: clip;
justify-content: center;
min-width: auto;
background-color: var(--color-variant-background);
color: var(--color-variant-text);
transition: background-color var(--animation-speed) var(--animation-easing),
border-color var(--animation-speed) var(--animation-easing);
&:hover {
background-color: var(--color-variant-hover-background);
border-color: var(--color-variant-hover-border);
color: var(--color-variant-hover-text);
}
}
.gift-card-form-option__button-label:has(:focus-visible) {
--variant-picker-stroke-color: var(--color-foreground);
border-color: var(--color-foreground);
outline: var(--focus-outline-width) solid var(--color-foreground);
outline-offset: var(--focus-outline-offset);
}
.gift-card-form-option__button-label:has(:checked) {
color: var(--color-selected-variant-text);
background-color: var(--color-selected-variant-background);
border-color: var(--color-selected-variant-border);
transition: background-color var(--animation-speed) var(--animation-easing),
border-color var(--animation-speed) var(--animation-easing);
&:hover {
background-color: var(--color-selected-variant-hover-background);
border-color: var(--color-selected-variant-hover-border);
color: var(--color-selected-variant-hover-text);
}
}
.gift-card-form-option__button-label input {
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
width: 100%;
height: 100%;
}
.recipient-fields {
display: flex;
flex-direction: column;
gap: var(--gap-sm);
transition: opacity 0.3s var(--animation-easing);
padding-block-start: var(--padding-xl);
}
.recipient-fields[hidden] {
display: none;
}
.field--send-on {
display: flex;
flex-direction: column;
}
.recipient-form__message {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--gap-sm);
margin-top: var(--margin-sm);
}
.recipient-form-field-label {
position: absolute;
left: var(--padding-sm);
bottom: var(--padding-sm);
font-style: italic;
color: var(--color-input-text);
}
.recipient-fields__textarea {
min-height: 5.5rem;
overflow-y: auto;
padding-bottom: calc(var(--padding-sm) * 3);
scroll-padding-bottom: calc(var(--padding-sm) * 3);
}
.recipient-fields__input {
flex-grow: 1;
padding: var(--input-padding);
background-color: var(--color-input-background);
color: var(--color-input-text);
text-align: left;
font-size: var(--font-paragraph--size);
border: var(--style-border-width-inputs) solid var(--color-input-border);
border-radius: var(--style-border-radius-inputs);
&:autofill {
background-color: var(--color-input-background);
color: var(--color-input-text);
}
&:is(:focus) {
outline-color: var(--color-input-background);
}
}
.field--send-on .recipient-fields__input::-webkit-calendar-picker-indicator {
cursor: pointer;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 24 24' %3E%3Cg%3E%3Cpath d='M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-image: none;
background-color: currentColor;
mask-type: match-source;
}
.field--send-on .recipient-fields__input::-webkit-datetime-edit {
cursor: text;
}
.field--send-on .recipient-fields__input::-webkit-datetime-edit-year-field,
.field--send-on .recipient-fields__input::-webkit-datetime-edit-month-field,
.field--send-on .recipient-fields__input::-webkit-datetime-edit-day-field {
color: var(--color-input-text);
}
.field--send-on .recipient-fields__input {
cursor: text;
}
@supports (-moz-appearance: none) {
.field--send-on .recipient-fields__input {
cursor: pointer;
}
}