.form {
    @apply max-w-md;

    // TODO
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply mt-3 mb-0;
    }

    header {
        @apply mb-2;
    }

    .description {
        @apply text-gray-600 text-sm;
    }

    .footer {
        @apply mt-4 mb-3;
    }
}

.field {
    @apply block py-1 text-sm;

    .help-text {
        @apply text-gray-500 block mt-1;
    }
}

.field-label {
    @apply text-gray-600 font-medium;
}

.field-checkbox {
    @apply flex items-center;

    .field-label {
        @apply text-current font-normal pl-2 text-base;
    }
}

.field-control:not([type='checkbox']) {
    @apply mt-1 block w-full;
}

.fieldset {
    @apply mt-6;

    legend {
        @apply text-gray-700 tracking-wide uppercase font-medium text-sm;
    }
}

.option-list {
    @apply block py-1;

    legend {
        @apply text-gray-600 text-sm font-medium;
    }
}

.form-message {
    @apply p-1 block;

    // this is temporary
    &.success {
        @apply text-success;
    }
    &.success svg {
        @apply text-success inline-block;
    }
    &.failed svg {
        @apply text-danger inline-block;
    }
}

.field-error {
    @apply mt-1 block text-danger;
}

.form {
    .ng-submitted .ng-invalid:not(:focus),
    .ng-touched.ng-invalid:not(:focus) {
        @apply border-danger;
    }
}

/*
.field-control-addon {
    @apply px-3 inline-flex flex-col flex-shrink-0 items-center justify-center text-secondary;

    &.field-control {
        @apply w-full;
    }

    .button {
        @apply py-1 h-full -ml-2.5 -mr-3;
    }
}

.field-control-group {
    @apply flex items-stretch h-full border border-gray-500 shadow;

    .field-control {
        @apply grow m-0 border-transparent outline-0;
    }

    /*
    .field-control:focus {
        @apply border border-primary;
    }

    &:focus-within {
        @apply border-primary outline-2 outline outline-offset-2;
    }

    &.invalid {
        @apply border-danger;
    }

    .ng-submitted .field-control.ng-invalid, .field-control.ng-touched.ng-invalid {
        @apply border-0;
    }
}*/


.field-control-addon {
    @apply inline-flex flex-col flex-shrink-0 items-center justify-center text-secondary px-3;

    &.field-control {
        @apply w-full;
    }

    .button {
        @apply py-1 h-full -mr-3;
    }
}

.field-control-group {
    @apply flex items-stretch h-full border border-gray-500 shadow;

    .field-control {
        box-shadow: none;
        @apply grow m-0 border-0 outline-0;
    }

    &:focus-within {
        @apply outline outline-1 outline-primary;
    }

    &.invalid:not(:focus-within) {
        @apply border-danger;
    }

    > *:not(:first-child).field-control-addon {
        @apply pl-0;
    }

    > *:not(:last-child).field-control-addon {
        @apply pr-0;
    }
}

.field-control-combo {
    @apply flex items-stretch;

    .field-control {
        @apply grow border;
    }

    .button {
        @apply -mx-2 mt-1;
    }
}