@layer components {
    .field:not(:last-child) {
        @apply mb-3;
    }

    .field.spaced:not(:last-child) {
        @apply mb-6;
    }

    .field-body .field .field {
        @apply mb-0;
    }

    .field.addons {
        @apply flex justify-start;
    }

    .field.addons .control.expanded {
        @apply flex-grow flex-shrink;
    }

    .field.addons .control:first-child:not(:only-child) .input,
    .field.addons .control:first-child:not(:only-child) .select select {
        @apply rounded-r-none border-r-0;
    }

    .field.addons .control:last-child:not(:only-child) .input,
    .field.addons .control:last-child:not(:only-child) .select select {
        @apply rounded-l-none border-l-0;
    }

    .field.grouped {
        @apply flex justify-start;
    }

    .field.grouped > .control:not(:last-child) {
        @apply mr-3;
    }

    .field.grouped.multiline {
        @apply flex-wrap;
    }

    .label {
        @apply block font-bold mb-2;
    }

    .control {
        @apply relative;
    }

    .control.icons-left,
    .control.icons-right {
        @apply relative;
    }

    .input,
    .textarea,
    .select select,
    .file-cta,
    .file-name {
        @apply px-3 py-2 border border-gray-400 rounded;
    }

    .input,
    .select select,
    .file-cta,
    .file-name {
        @apply h-10;
    }

    .input,
    .textarea,
    .select select {
        @apply w-full max-w-full focus:border-gray-100 focus:ring focus:outline-none bg-white;
    }

    .input[readonly] {
        @apply pointer-events-none bg-gray-100;
    }

    .textarea {
        @apply h-24;
    }

    .control.icons-left .icon,
    .control.icons-right .icon {
        @apply absolute top-0 z-10 w-10 h-10;
    }

    .control.icons-left .input,
    .control.icons-left .select select {
        @apply pl-10;
    }

    .control.icons-left .icon.left {
        @apply left-0;
    }

    .control.icons-right .input,
    .control.icons-right .select select {
        @apply pr-10;
    }

    .control.icons-right .icon.right {
        @apply right-0;
    }

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

    .file {
        @apply flex items-stretch justify-start relative;
    }

    .upload {
        @apply inline-flex;
    }

    .upload input[type="file"] {
        @apply absolute top-0 left-0 w-full h-full opacity-0 outline-none cursor-pointer;
    }
}

.checkbox,
.radio,
.switch {
    @apply inline-flex items-center cursor-pointer relative;
}

.checkbox input[type="checkbox"],
.radio input[type="radio"],
.switch input[type="checkbox"] {
    @apply absolute left-0 opacity-0;
}

.checkbox input[type="checkbox"] + .check,
.radio input[type="radio"] + .check,
.switch input[type="checkbox"] + .check {
    @apply border-gray-300 border hover:border-gray-400;
}

.checkbox input[type="checkbox"] + .check,
.radio input[type="radio"] + .check {
    @apply block w-5 h-5;
}

.checkbox input[type="checkbox"] + .check {
    @apply rounded;
}

.switch input[type="checkbox"] + .check {
    @apply flex items-center flex-shrink-0 w-12 h-6 p-0.5 bg-gray-200;
}

.radio input[type="radio"] + .check,
.switch input[type="checkbox"] + .check,
.switch input[type="checkbox"] + .check:before {
    @apply rounded-full;
}

.checkbox input[type="checkbox"]:checked + .check,
.radio input[type="radio"]:checked + .check {
    @apply bg-no-repeat bg-center bg-blue-500 border-blue-500 border-4;
}

.checkbox input[type="checkbox"]:checked + .check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E");
}

.radio input[type="radio"]:checked + .check {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E");
}

.switch input[type="checkbox"]:checked + .check {
    @apply bg-blue-500 border-blue-500;
}

.switch input[type="checkbox"] + .check:before {
    content: "";
    @apply block w-5 h-5 bg-white border border-gray-300;
}

.switch input[type="checkbox"]:checked + .check:before {
    transform: translate3d(110%, 0, 0);
    @apply border-blue-500;
}

.checkbox .control-label,
.radio .control-label,
.switch .control-label {
    @apply pl-2;
}
