/**
 * Styles for the login form open input boxes. Label floats up above it when content
 * is input and then sinks back down into the field if left empty.
 */
.input-open {
    @apply .w-full .px-3 .relative;
}

.input-open > .input {
    @apply .appearance-none .block .w-full .text-grey-darker .border-b-2 .border-grey-light .py-3 .mb-3;

    &:focus {
        @apply .border-blue-light;
        outline: 0;
        transition: border 500ms ease-out;
    }

    &:focus + label, &:valid + label, &.has-content + label {
        @apply .text-grey-darker .px-0 .cursor-pointer;
        transform:translateY(-26px)
    }

    &:required {
        box-shadow: none;
    }
}

.input-open > label {
    @apply .block .uppercase .tracking-wide .text-grey .text-xs .mb-2 .absolute;
    top: 14px;
    transition: transform 200ms ease-out;
}

.input:not(.open-label) {
    @apply .appearance-none .p-3 .rounded .border .text-grey-darker .w-full;
    transition: all 100ms linear;

    &:focus {
        @apply .border-blue-light;
    }

    &:required, &:invalid {
        box-shadow: none;
    }
}

.input-label {
    @apply .block .uppercase .tracking-wide .text-grey-darkest .text-xs .font-bold .mb-1;
}

.input-help {
    @apply .text-xs .text-grey .pt-2;
}