.answer-questionnaire { @apply border-t-2 border-background pt-8; &__step { @apply space-y-10; } &__step-counter { @apply inline-block text-lg text-black font-semibold bg-tertiary; } &__step-heading { @apply space-y-4; div { @apply text-gray-2 text-lg; } } &__question { @apply space-y-4; } &__question-label { @apply text-black text-xl font-semibold relative before:content-[attr(data-answer-idx)] before:w-6 before:h-6 md:before:absolute md:before:-left-4 md:before:-translate-x-full before:inline-flex before:justify-center before:rounded-full before:bg-background before:text-lg before:text-gray-2 before:font-semibold; } &__question-description { @apply text-gray-2; } &__multiple-option, &__single-option { @apply text-gray-2 space-y-4; label { @apply flex cursor-pointer; } label + * { @apply mt-2 w-full; } } &__multiple-matrix, &__single-matrix { @apply text-gray-2 text-sm rounded overflow-x-auto; table { @apply w-full; } th, td { @apply border border-background px-2 py-2.5; } thead td, th { @apply bg-background font-normal; } td:not(:first-child) { @apply text-center [&>*]:flex [&>*]:items-center [&>*]:justify-center; } input[type="text"] { @apply min-w-[120px] w-full; } } &__sorting { @apply flex items-center justify-between relative text-gray-2 pl-8 pr-2 py-2.5 border-2 border-background rounded cursor-pointer before:content-[counter(item)] before:absolute before:left-0 before:top-0 before:bg-background before:w-5 before:h-full before:grid before:place-items-center before:text-gray-2 before:font-bold; counter-increment: item; &-container { @apply space-y-4; counter-reset: item; } input { @apply hidden; } svg { @apply text-gray fill-current w-5 h-5; } } &__footer { @apply flex flex-col gap-10 pt-10 border-t-2 border-background text-gray-2 only:border-t-0; } &__tos { @apply space-y-4 cursor-pointer; div { @apply text-sm; } } &__submit { @apply flex items-center justify-between; > *:only-child { @apply ml-auto; } } }