.app-email-input{--app-email-input-radius: var(--border-radius-20);--app-email-input-bg: var(--fill-neutral-default);--app-email-input-bg-hover: var(--fill-neutral-hover);--app-email-input-bg-disabled: var(--fill-neutral-disabled);--app-email-input-button-bg: var(--fill-brand-default);--app-email-input-button-bg-disabled: var(--fill-brand-disabled);--app-email-input-button-color: var(--icon-bold-primary);--app-email-input-button-color-disabled: var(--icon-brand-disabled);--app-email-input-control-color: var(--text-primary);--app-email-input-helper-icon-color: var(--icon-error);--app-email-input-helper-text-color: var(--text-error-primary);display:flex;flex-direction:column;width:100%;max-width:var(--app-email-input-max-width, none);gap:0}.app-email-input:has(.app-email-input__helper:not([hidden])){gap:var(--space-4)}.app-email-input--error-default{--app-email-input-button-bg-disabled: var(--app-email-input-button-bg);--app-email-input-button-color-disabled: var(--app-email-input-button-color);--app-email-input-helper-icon-color: var(--icon-error);--app-email-input-helper-text-color: var(--text-error-primary)}.app-email-input--error-on-banner{--app-email-input-button-bg-disabled: var(--app-email-input-button-bg);--app-email-input-button-color-disabled: var(--app-email-input-button-color);--app-email-input-control-color: var(--text-error-primary);--app-email-input-helper-icon-color: var(--icon-bold-primary);--app-email-input-helper-text-color: var(--text-bold-primary)}.app-email-input--cta-mode{display:flex;flex-direction:column;width:100%;max-width:var(--app-email-input-max-width, none);padding:0;border:none;background:transparent;text-align:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}.app-email-input--cta-mode:focus-visible{outline:none}.app-email-input__field{display:inline-flex;align-items:center;gap:var(--space-16);box-sizing:border-box;width:100%;min-height:5.6rem;padding:var(--space-4) var(--space-4) var(--space-4) var(--space-20);overflow:hidden;border:.1rem solid transparent;border-radius:var(--app-email-input-radius);background:var(--app-email-input-bg);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}.app-email-input__field:hover{background:var(--app-email-input-bg-hover)}.app-email-input__field:has([data-email-field-error]):hover,.app-email-input [data-email-form-error]:hover{background:var(--app-email-input-bg-hover)}.app-email-input__field:has(.app-email-input__control:focus){box-shadow:var(--shadow-border-brand-focused-thin);outline:none}.app-email-input__field:has(.app-email-input__control:focus:not(:placeholder-shown)){border-color:var(--border-brand)}.app-email-input__field:has(.app-email-input__control:disabled),.app-email-input__field:has(.app-email-input__control:disabled):hover{background:var(--app-email-input-bg-disabled)}.app-email-input [data-email-form-error],.app-email-input__field:has([data-email-field-error]){border-color:var(--border-error)}.app-email-input__field:has([data-email-field-error]) .app-email-input__control,.app-email-input__field:has(.app-email-input__control[aria-invalid=true]:not(:placeholder-shown)) .app-email-input__control,.app-email-input--error-default .app-email-input__control:not(:placeholder-shown){color:var(--text-error-primary)}.app-email-input__control{flex:1 0 0;min-width:0;padding:0;border:none;background:transparent;outline:none;font-size:var(--font-size-16);font-weight:var(--font-weight-normal);line-height:var(--line-height-150);letter-spacing:var(--letter-spacing-08-percent);color:var(--app-email-input-control-color);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.app-email-input__control::placeholder{color:var(--text-tertiary)}.app-email-input__field:has(.app-email-input__control:disabled) .app-email-input__control,.app-email-input__field:has(.app-email-input__control:disabled) .app-email-input__control::placeholder{color:var(--text-disabled)}.app-email-input__button{position:relative;display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:4.8rem;min-height:4.8rem;padding:var(--space-12);border:none;border-radius:var(--border-radius-button-medium);background:var(--app-email-input-button-bg);color:var(--app-email-input-button-color);cursor:pointer;aspect-ratio:1;transition:background-color .3s ease,color .3s ease}.app-email-input__button:hover{background:var(--fill-brand-hover)}.app-email-input__button:before{display:block;width:2rem;height:2rem;background-color:currentColor;content:"";mask-position:center;mask-repeat:no-repeat;mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;transform-origin:center}.app-email-input__button:disabled,.app-email-input__field:has(.app-email-input__control:disabled) .app-email-input__button{background:var(--app-email-input-button-bg-disabled);color:var(--app-email-input-button-color-disabled);cursor:not-allowed}.app-email-input__button[data-email-button-state=loading]{background:var(--fill-brand-hover);cursor:not-allowed;pointer-events:none}.app-email-input__button[data-email-button-state=loading]:before{animation:app-email-input-spin 1s linear infinite}.app-email-input__button[data-email-button-state=complete]{pointer-events:none}.app-email-input--cta-mode .app-email-input__button{cursor:inherit;pointer-events:none}.app-email-input__helper{display:flex;align-items:flex-start;gap:var(--space-8);width:100%;padding-inline:var(--space-20)}.app-email-input__helper[hidden]{display:none}.app-email-input__helper-icon{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:1.2rem;min-width:1.2rem;height:2.1rem;color:var(--app-email-input-helper-icon-color)}.app-email-input__helper-icon svg{display:block;width:1.2rem;height:1.2rem;fill:currentColor}.app-email-input__helper-text{display:block;font-size:var(--font-size-14);font-weight:var(--font-weight-normal);line-height:var(--line-height-150);letter-spacing:var(--letter-spacing-08-percent);color:var(--app-email-input-helper-text-color)}.app-email-input__cta-label{display:block;flex:1 0 0;min-width:0;font-size:var(--font-size-16);font-weight:var(--font-weight-normal);line-height:var(--line-height-150);letter-spacing:var(--letter-spacing-08-percent);color:var(--text-tertiary);text-align:left;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}@keyframes app-email-input-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
/*# sourceMappingURL=/cdn/shop/t/25/assets/component-app-email-input.css.map */