Toggle: Default

.atm-form-toggle {
    @apply relative;
    @apply inline-block;
    @apply w-10;
    @apply mr-2;
    @apply align-middle;
    @apply select-none;
    @apply transition;
    @apply duration-200;
    @apply ease-in;

    .form-toggle {
        @apply absolute;
        @apply block;
        @apply w-6;
        @apply h-6;
        @apply rounded-full;
        @apply bg-white;
        @apply border-shade;
        @apply border-4;
        @apply appearance-none;
        @apply cursor-pointer;

        &:checked {
            @apply right-0;
            @apply border-cta;
        }

        &:checked + .form-toggle-background {
            @apply bg-cta;
        }

        &[disabled] {
            @apply cursor-not-allowed;
        }

        &[disabled] + .form-toggle-background {
            @apply cursor-not-allowed;
        }
    }

    .form-toggle-background {
        @apply block;
        @apply overflow-hidden;
        @apply h-6;
        @apply rounded-full;
        @apply bg-shade;
        @apply cursor-pointer;
    }
}