.m-0 {
    margin: 0;
}
.ml-1 {
    margin-left: var(--wa-space-3xs);
}
.ml-2 {
    margin-left: var(--wa-space-2xs);
}
.ml-3 {
    margin-left: var(--wa-space-xs);
}
.ml-4 {
    margin-left: var(--wa-space-s);
}
.ml-5 {
    margin-left: var(--wa-space-m);
}
.ml-6 {
    margin-left: var(--wa-space-l);
}
.ml-7 {
    margin-left: var(--wa-space-xl);
}
.ml-8 {
    margin-left: var(--wa-space-2xl);
}
.ml-9 {
    margin-left: var(--wa-space-3xl);
}

.mb-1 {margin-bottom: var(--wa-space-3xs);}
.mb-2 {margin-bottom: var(--wa-space-2xs);}
.mb-3 {margin-bottom: var(--wa-space-xs);}
.mb-4 {margin-bottom: var(--wa-space-s);}
.mb-5 {margin-bottom: var(--wa-space-m);}
.mb-6 {margin-bottom: var(--wa-space-l);}
.mb-7 {margin-bottom: var(--wa-space-xl);}
.mb-8 {margin-bottom: var(--wa-space-2xl);}
.mb-9 {margin-bottom: var(--wa-space-3xl);}

.mt-1 {margin-top: var(--wa-space-3xs);}
.mt-2 {margin-top: var(--wa-space-2xs);}
.mt-3 {margin-top: var(--wa-space-xs);}
.mt-4 {margin-top: var(--wa-space-s);}
.mt-5 {margin-top: var(--wa-space-m);}
.mt-6 {margin-top: var(--wa-space-l);}
.mt-7 {margin-top: var(--wa-space-xl);}
.mt-8 {margin-top: var(--wa-space-2xl);}
.mt-9 {margin-top: var(--wa-space-3xl);}

.my-1 {
    margin-top: var(--wa-space-3xs);
    margin-bottom: var(--wa-space-3xs);
}
.my-2 {
    margin-top: var(--wa-space-2xs);
    margin-bottom: var(--wa-space-2xs);
}
.my-3 {
    margin-top: var(--wa-space-xs);
    margin-bottom: var(--wa-space-xs);
}
.my-4 {
    margin-top: var(--wa-space-s);
    margin-bottom: var(--wa-space-s);
}
.my-5 {
    margin-top: var(--wa-space-m);
    margin-bottom: var(--wa-space-m);
}
.my-6 {
    margin-top: var(--wa-space-l);
    margin-bottom: var(--wa-space-l);
}
.my-7 {
    margin-top: var(--wa-space-xl);
    margin-bottom: var(--wa-space-xl);
}
.my-8 {
    margin-top: var(--wa-space-2xl);
    margin-bottom: var(--wa-space-2xl);
}
.my-9 {
    margin-top: var(--wa-space-3xl);
    margin-bottom: var(--wa-space-3xl);
}

.w-50 {
    width: 50%;
}

.d-flex {
    display: flex;
}

.d-none {
    display: none;
}

.h-min-content {
    height: min-content;
}

.bg-blue-95 {
    background-color: var(--wa-color-blue-95);
}

.options-end {
    display: flex;
    justify-content: end;
    gap: var(--wa-space-s);
}

.options-spread {
    display: flex;
    justify-content: space-evenly;
    gap: var(--wa-space-s);
}

wa-card[disabled]{
    opacity:75%;
    pointer-events: none;
    --wa-color-text-normal: var(--wa-color-neutral-60);
}

wa-card[disabled] wa-radio {
    opacity: 50%
}

/*Relates to two-click button confirmation*/

@keyframes disappearAndReappear {
    0% { clip-path: inset(0 0 0 0); }
    50% {   clip-path: inset(0 100% 0 0);
        filter: saturate(1);
    }
    100% {  clip-path: inset(0 0 0 0);
        filter: saturate(1);
    }
}

@keyframes addConfirmText {
    0% { content: var(--conf-og-text); }
    49.9% { content: var(--conf-og-text); }
    50% { content: var(--conf-new-text); }
    100% { content: var(--conf-new-text); }
}

.btn-confirm-anim {
    animation: disappearAndReappear 0.5s linear backwards;
}

/*.btn-confirm-anim::after {
    content: '';
    animation: addConfirmText 0.5s linear forwards;
}*/

.btn-confirm-anim::part(base)::after {
    content: '';
    animation: addConfirmText 0.5s linear forwards;
}

.btn-confirm-anim.verify-conf { filter: saturate(1); }

.verify-conf {
    filter: saturate(0.6);
    transition: filter 0.5s ease-in-out;
}

/* end of two-click button confirmation*/