@import "~scss/_mixins";

.emailCollectionForm { display: flex; flex-direction: column; }
.emailCollectionForm {
    .statusBar { @include text-small; min-height: 18px; margin: 0px 0px 2px; padding-top: 4px; color: var(--color-text-secondary);  }
    .statusBar.error { color: var(--color-red); }

    .buttonWrapper { padding-top: 8px; }
    .buttonWrapper {
        .button { width: 100%; overflow: hidden; }
        .loaderWrapper { border-radius: 0px !important; }
    }

    .inputWrapper {
        .input { border-color: var(--color-shape-primary) !important; }
    }

    .step0 { padding-top: 16px; }
    .step0 {
        .check { @include text-small; }
        .inputWrapper { padding-top: 16px; }
        .inputWrapper {
            .input { border-radius: 3px; height: 36px; }
        }
    }

    .step1 { padding-top: 16px; text-align: center; }
    .step1 {
        .pin { margin-bottom: 12px; }
        .pin {
            .input { @include text-header1; width: 35px; height: 47px; border-radius: 6px; border-color: var(--color-shape-primary); }
        }

        .resend { font-weight: 500; color: var(--color-text-secondary); @include text-small; }
        .resend.countdown { color: var(--color-text-primary); }
        .resend:not(.countdown):hover { color: var(--color-control-active); }
    }

    .step2 { padding-top: 8px; }
    .step2 {
        .icon { width: 100%; height: 138px; background: url('~img/icon/payment/green.svg') 50% 50% no-repeat; background-size: 80px; }
    }
}
