@import 'constants';
@import 'styling';

.form-control {
    .checkbox, .radio, .switch {
        display: block;
        position: relative;
        margin: 0 0 0.75em;
        line-height: 1.125;
        box-sizing: initial;
    }

    .checkbox input[type="checkbox"], .radio input[type="radio"], .switch input[type="checkbox"] {
        @include accessible-input;

        + label {
            display: inline-flex;
            font-size: $form-font-size-default;

            &:before, &:after {
                cursor: pointer;
            }
        }

        &[disabled] {
            cursor: not-allowed;

            + label {
                cursor: not-allowed;
                color: lighten($color-dark, 48%);
				
                &:before, &:after {
                    cursor: not-allowed;
                }
            }
        }
    }

    .checkbox input[type="checkbox"], .radio input[type="radio"] {
        &:focus + label:before {
            @include accessible-outlines;
        }

        &[disabled] {
			&:checked + label:before {
				border-color: lighten($color-dark, 48%);
			}
        }
    }

    .switch input[type="checkbox"] {
        &:focus + label:after {
            @include accessible-outlines;
        }

        &[disabled] {
            cursor: not-allowed;

			&:checked + label:after {
				border-color: lighten($color-dark, 48%);
			}
        }
    }

    .checkbox {
        input[type="checkbox"] {
            + label {
                &:before {
                    content: "";
                    display: inline-block;
                    position: relative;
                    margin-right: $clickable-label-offset;
                    width: $clickable-input-size;
                    height: $clickable-input-size;
                    left: 0;
                    background: $color-white;
                    border: 1px solid $color-light;
                    border-radius: $border-radius;
                    transition: $clickable-background-transition, $clickable-border-transition, $clickable-color-transition;
                }
            }
    
            &:checked {
                + label {
                    &:before {
                        background: $color-dark;
                        border-color: $color-dark;
                    }
    
                    &:after {
                        content: "✓";
                        display: inline-block;
                        position: absolute;
                        top: 0;
                        left: 2px;
                        color: $color-white;
                    }  
                }   
            }
			
			&[disabled] {
				&:checked + label:before {
					background: lighten($color-dark, 48%);
				}
			}
        }

        @each $size, $fontSize, $height, $rpadding in $form-size-list {
            &.#{$size} {
                font-size: $fontSize;

                input[type="checkbox"] {
                    &:checked {
                        + label {
                            &:after {
                                @if $size == large {
                                    top: -1px;
                                    left: 3px;
                                }
                            }   
                        }   
                    }
                }
            }
        }
    }

    .radio {
        input[type="radio"] {
            + label {
                &:before {
                    content: "";
                    display: inline-block;
                    position: relative;
                    margin-right: $clickable-label-offset;
                    width: $clickable-input-size;
                    height: $clickable-input-size;
                    background: $color-white;
                    border: 1px solid $color-light;
                    border-radius: 50%;
                    transition: $clickable-border-transition;
                }
    
                &:after {
                    content: " ";
                    display: inline-block;
                    position: absolute;
                    width: 10px;
                    height: 10px;
                    left: 4px;
                    top: 4px;
                    background: $color-dark;
                    border-radius: 50%;
                    transform: scale(0, 0);
                    transition: $clickable-transform-transition, $clickable-background-transition;
                }
            }
    
            &:checked {
                + label {
                    &:before {
                        background: $color-white;
                        border-color: $color-dark;
                    }
    
                    &:after {
                        transform: scale(1, 1);
                    }
                }

				&[disabled] {
					&:checked + label:after {
						background: lighten($color-dark, 48%);
					}
				}
            }
        }

        @each $size, $fontSize, $height, $rpadding in $form-size-list {
            &.#{$size} {
                font-size: $fontSize;

                input[type="radio"] {
                    + label {
                        &:before {
                            @if $size == small or $size == large {
                                height: 1.125em;
                                width: 1.125em;
                            }
                        }
                        &:after {
                            @if $size == small {
                                width: 8px;
                                height: 8px;
                            } @else if $size == medium {
                                width: 13px;
                                height: 13px;
                            } @else if $size == large {
                                width: 17px;
                                height: 17px;
                                top: 5px;
                                left: 5px;
                            }
                        }
                    }
                }
            }
        }

    }

    .switch {
        input[type="checkbox"] {
            + label {
                // Background
                &:before {
                    content: "";
                    height: $switch-background-height;
                    width: $switch-background-width;
                    border-radius: $rounded-border-radius;
                    margin-right: $clickable-label-offset;
                    background: $switch-background-color;
                    transition: $clickable-background-transition, $clickable-border-transition, $clickable-color-transition;
                }

                // Handle
                &:after {
                    content: "";
                    display: block;
                    position: absolute;
                    background: $color-white;
                    border-radius: 50%;
                    height: $switch-handle-size;
                    width: $switch-handle-size;
                    left: $switch-handle-off-offset;
                    top: $switch-handle-top-offset;
                    transition: $switch-handle-transition;
                }
            }
    
            &:checked {
                + label {
                    &:before {
                        background-color: $color-dark;
                    }

                    &:after {
                        left: $switch-handle-on-offset;
                    }
                }   
            }
			
			&[disabled] {
				&:checked + label:before {
					background: lighten($color-dark, 48%);
				}
			}
        }

        @each $size, $fontSize in $switch-size-list {
            &.#{$size} {
                font-size: $fontSize;

                input[type="checkbox"] + label {
                    &:before {
                        @if $size == medium {
                            height: 1.625rem;
                        } 
                    }

                    &:after {
                        @if $size == small {
                            top: 0.125rem;
                            height: 0.75rem;
                        } 
                    }
                }
            }
        }

    }

    @if $include-color-palette {
        @include clickable-colors;
    }
}