textarea, select, input, button {
    outline: none;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield !important;
}

/**
 * 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-neutral-800 .border-b-2 .border-neutral-200 .py-3 .mb-3;

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

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

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

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

/**
 * Styling for other forms throughout the Panel.
 */
.input:not(.open-label) {
    @apply .appearance-none .p-3 .rounded .border .border-neutral-200 .text-neutral-800 .w-full;
    transition: border 150ms linear;

    &:focus {
        @apply .border-primary-400;
    }

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

    &.error {
        @apply .text-red-600 .border-red-500;
    }
}

select:not(.appearance-none) {
    @apply .outline-none .appearance-none .block .bg-white .border .border-neutral-200 .text-neutral-400 .p-3 .pr-8 rounded;
    transition: border-color 150ms linear, color 150ms linear;

    &:hover:not(:disabled), &:focus {
        @apply .outline-none .border-primary-500 .text-neutral-700;
    }

    -webkit-appearance: none;
    -moz-appearance: none;

    &::-ms-expand {
        display: none;
    }

    background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ") no-repeat center center;
    background-size: 1rem;
    background-position-x: calc(100% - 0.75rem);
}

.input-label {
    @apply .block .uppercase .tracking-wide .text-neutral-800 .text-xs .font-bold .mb-2;
}

.input-help {
    @apply .text-xs .text-neutral-400 .pt-2;

    &.error {
        @apply .text-red-600;
    }
}

a.btn {
    @apply .no-underline;
}

.btn {
    @apply .rounded .p-2;
    transition: all 150ms linear;

    /**
     * Button Colors
     */
    &.btn-primary {
        @apply .bg-primary-500 .border-primary-600 .border .text-white;

        &:hover:not(:disabled) {
            @apply .bg-primary-600 .border-primary-800;
        }
    }

    &.btn-green {
        @apply .bg-green-500 .border-green-600 .border .text-white;

        &:hover:not(:disabled) {
            @apply .bg-green-600 .border-green-800;
        }
    }

    &.btn-red {
        &:not(.btn-secondary) {
            @apply .bg-red-500 .border-red-600 .border .text-white;
        }

        &:hover:not(:disabled) {
            @apply .bg-red-600 .border-red-800;
        }
    }

    &.btn-secondary {
        @apply .border .border-neutral-200 .text-neutral-400;

        &:hover:not(:disabled) {
            @apply .border-neutral-500 .text-neutral-700;
        }

        &.btn-red:hover:not(:disabled) {
            @apply .bg-red-600 .border-red-800 .text-white;
        }
    }

    /**
     * Button Sizes
     */
    &.btn-jumbo {
        @apply .p-4 .w-full .uppercase .tracking-wide .text-sm;
    }

    &.btn-lg {
        @apply .p-4 .uppercase .tracking-wide .text-sm;
    }

    &.btn-sm {
        @apply .px-6 .py-3 .uppercase .tracking-wide .text-sm;
    }

    &.btn-xs {
        @apply .py-2 .px-2 .uppercase .text-xs;
    }

    &:disabled, &.disabled {
        opacity: 0.55;
        cursor: default;
    }
}