@charset 'utf-8';

/*  ========================================================================
    JUICE -> ELEMENTS -> FORM -> CUSTOM -> CHECKBOX
    ========================================================================  */

// Check if the elements with custom checkbox should be imported
@if $import-elements and $import-element-custom-checkbox {
    .custom-checkbox {
        cursor: pointer;
        position: relative;

        // Pseudo classes
        &:hover {
            // Nested selectors
            div {
                // Pseudo elements
                &::before {
                    border-color: $custom-checkbox-border-color-hover;
                }
            }
        }

        // Nested selectors
        input[type=checkbox] {
            clip: rect(0, 0, 0, 0);
            height: 0;
            opacity: 0;
            padding: 0;
            position: absolute;
            margin: 0;
            width: 0;

            // Pseudo classes
            &:focus + div {
                // Pseudo elements
                &::before {
                    border-color: $custom-checkbox-checked-color;
                    box-shadow: 0 0 $custom-checkbox-accessibility-focus-width $custom-checkbox-accessibility-focus-color;
                }
            }

            &:checked + div {
                // Pseudo elements
                &::before {
                    background: $custom-checkbox-checked-color;
                    border-color: $custom-checkbox-checked-color;
                    box-shadow: inset 0 0 0 2px $custom-checkbox-background-color;
                }
            }

            &:checked:focus + div {
                // Pseudo elements
                &::before {
                    box-shadow: inset 0 0 0 2px $custom-checkbox-background-color,
                                0 0 $custom-checkbox-accessibility-focus-width $custom-checkbox-accessibility-focus-color;
                }
            }
        }

        div {
            display: flex;
            align-items: center;

            // Pseudo elements
            &::before {
                background: $custom-checkbox-background-color;
                border: 0 solid $custom-checkbox-border-color;
                border-bottom-width: $custom-checkbox-border-width-bottom;
                border-left-width: $custom-checkbox-border-width-left;
                border-right-width: $custom-checkbox-border-width-right;
                border-top-width: $custom-checkbox-border-width-top;
                content: '';
                display: block;
                height: $custom-checkbox-height;
                margin: 0 $custom-checkbox-content-spacing;
                max-height: $custom-checkbox-height;
                min-height: $custom-checkbox-height;
                max-width: $custom-checkbox-height;
                min-width: $custom-checkbox-height;
                width: $custom-checkbox-height;
            }
        }

        // Check if the custom checkbox size modifiers should be declared
        @if $custom-checkbox-size-modifiers {
            // Cycle through all of the sizes
            @each $size in $sizes {
                // Modifiers: Sizes
                &.is-#{$size} {
                    // Nested selectors
                    div {
                        // Pseudo elements
                        &::before {
                            height: map-get($custom-checkbox-height-sizes, $size);
                            margin-right: map-get($custom-checkbox-content-spacing-sizes, $size);
                            max-height: map-get($custom-checkbox-height-sizes, $size);
                            min-height: map-get($custom-checkbox-height-sizes, $size);
                            max-width: map-get($custom-checkbox-height-sizes, $size);
                            min-width: map-get($custom-checkbox-height-sizes, $size);
                            width: map-get($custom-checkbox-height-sizes, $size);
                        }
                    }
                }

                // Check if the button size modifiers with breakpoints should be declared
                @if $button-size-modifiers-with-breakpoints {
                    // Cycle through all of the breakpoints
                    @each $breakpoint-name, $breakpoint-value in $breakpoints {
                        // Breakpoint
                        @include breakpoint($breakpoint-name) {
                            // Modifiers: Size
                            &.is-#{$size}\@#{$breakpoint-name} {
                                // Nested selectors
                                div {
                                    // Pseudo elements
                                    &::before {
                                        height: map-get($custom-checkbox-height-sizes, $size);
                                        margin-right: map-get($custom-checkbox-content-spacing-sizes, $size);
                                        max-height: map-get($custom-checkbox-height-sizes, $size);
                                        min-height: map-get($custom-checkbox-height-sizes, $size);
                                        max-width: map-get($custom-checkbox-height-sizes, $size);
                                        min-width: map-get($custom-checkbox-height-sizes, $size);
                                        width: map-get($custom-checkbox-height-sizes, $size);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}