.field-switch {
    > .field-label:first-child {
        order: 1;
    }
    > .field-label:last-child {
        order: 3;
    }

    input[type="checkbox"] {
        order: 2;
        margin-left: $field-label-margin;
        margin-right: $field-label-margin;
        cursor: pointer;
        position: relative;
        appearance: none;
        outline: none;
        width: $field-switch-width;
        height: $field-switch-height;
        background-color: $field-default-color;
        border-radius: $field-switch-height;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
    
        &::after {
            content: '';
            position: absolute;
            top: 50%;
            left: $field-switch-space;
            width: $field-switch-icon-size;
            height: $field-switch-icon-size;
            background-color: $white-color;
            border-radius: 100%;
            box-shadow: 0 0 5px rgba(0, 0, 0, .2);
            transform: translateY(-50%);
            transition: .25s ease-in-out;
        }

        &:checked{ background-color: var(--var-bg-color); }
        &:checked::after{
            left: $field-switch-width - $field-switch-icon-size - $field-switch-space; 
        }

        &.slim {
            border-radius: 0;
            height: $field-switch-space + 1px;
        }

        &.slim:checked:after {
            left: $field-switch-width - $field-switch-icon-size;
        }

        &.round {
            border-radius: 0;
            height: $field-switch-icon-size;
        }

        &.round::after {
            width: $field-switch-height + $field-switch-space;
            height: $field-switch-height + $field-switch-space;
            left: $field-switch-space * -1;
        }

        &.round:checked:after {
            left: $field-switch-width - $field-switch-icon-size;
        }
    }
}