@import 'heroicons';
@import 'heading';

.form-wrap {

}

.form {
    @apply w-full;

    &--background {
        @apply bg-gray-100 rounded-lg ring-1 ring-gray-200 py-6 px-6;
    }
    &__section {
        @apply md:grid md:grid-cols-3 md:gap-6;
        
        & + & {
            @apply mt-6;
        }
        &--buttons {
            @apply flex flex-wrap sm:flex-nowrap justify-end sm:gap-6;
        }
        &-meta {
            @apply col-start-1 mb-2;
            @apply sm:mt-0;
            @apply md:col-span-1;
            
        }
        &-body {
            @apply md:col-span-2;
            @apply col-start-2;
            @apply px-4 py-4 rounded bg-white shadow;
        }
        &--merge-bottom {
            
            .form__section-body {
                @apply md:rounded-b-none !important;
            }
        }
        &--merge-top {
            @apply mt-4 !important;
            @apply md:mt-0 !important;

            .form__section-body {
                @apply md:border-t md:border-gray-200;
                @apply md:rounded-t-none !important;
            }
        }
    }
    &__input-group {

        & + & {
            @apply mt-4;
        }
    }
    &__input-block {
        @apply mt-4;

        &:first-child {
            @apply mt-0;
        }
        &--3 {
            @apply md:grid md:grid-cols-3 md:gap-6 items-end;
        }
        &--2 {
            @apply md:grid md:grid-cols-2 md:gap-6 items-end;
        }
        &--heading {
            @apply md:block;

            &:not(:first-child) {
                @apply mt-8 !important;
            }
        }
        &--rule {
            @apply border-b border-gray-200;
        }
        &--errors {
            @apply mt-0 items-start;
        }
    }
    &__input-post {
        @apply md:grid md:grid-cols-3 md:gap-6;

        & > :nth-child(2) {
            @apply mt-2;
            @apply md:col-span-2 md:mt-0;
        }
    }
    &__button {
        @apply w-full flex-none;
        @apply sm:flex-initial sm:w-auto;

        & + & {
            @apply mt-3;
            @apply sm:mt-0;
        }
    }
    &__heading-1 {
        @apply heading heading--1 heading--blue;
    }
    &__heading-2 {
        @apply heading heading--2 heading--blue;
    }
    &__heading-3 {
        @apply heading heading--3 heading--blue;
        @apply mb-0;
    }
    &__heading-4 {
        @apply heading heading--4 heading--blue;
        @apply mb-0;
    }
    &__rule {
        @apply border-t border-gray-300;
    }
    &__table-wrap {
        @apply w-full overflow-x-auto overflow-hidden;
    }
    &__table {
        @apply w-full divide-y divide-gray-200;

        thead {
            @apply bg-gray-50;
        }
        th {
            @apply px-2 py-2 text-left text-xs font-medium uppercase tracking-wider;
        }
        tbody {
            @apply bg-white divide-y divide-gray-200;
        }
        td {
            @apply px-2 py-2 whitespace-nowrap overflow-hidden overflow-ellipsis;
        }
    }
    &__asterisk {
        @apply text-red-600 align-top text-sm;
    }
}