/*!
 * 
  * Copyright (c) 2019-2023 Software AG, Darmstadt, Germany and/or Software AG USA Inc., Reston, VA, USA,
 * and/or its subsidiaries and/or its affiliates and/or their licensors.
 * 
 */

@import "../variables";
@import "../variables/checkboxes_vars";
@import "../variables/forms_vars";
@import "../mixins";

/* Check Box Styling - Start - */
.dlt-checkbox-group-label { // Actually it is a legend carrying a label name
    font-family: $forms-font-family;
    font-weight: $forms-legend-font-weight;
    font-size: $forms-legend-font-size;
    color: $forms-color-legend-text;
    display: inline-block;
    vertical-align: baseline;
    padding: 0 0 $checkboxes-legend-padding-bottom 0;
    margin: 0;
    line-height: $checkboxes-legend-line-height;
}

.dlt-checkbox-group{

    ul{
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .dlt-form-requirement{
        padding-top: var(--dlt-spacing-1-x, .5rem);
    }

    .dlt-checkbox:last-child {
        padding-bottom: 0;
    }
}

.dlt-checkbox {
    // @include component-vars(checkboxes); //Mixin to define all the root variables
    box-sizing: content-box;
    padding: $checkboxes-padding;
    line-height: $checkboxes-line-height;
    position: relative;


    input[type="checkbox"] {
        opacity: 0;
        height: 0;
        width: 0;
        margin: 0;
        position: absolute;

        /*Adding hover styles on the outer-box of the fake checkbox*/
        // &:enabled + label:hover::before,
        &:focus:enabled+label::before {
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-primary;
            outline: $checkboxes-border-width-hover $checkboxes-border-style-hover $forms-color-primary;
            outline-offset: $checkboxes-outline-offset;
        }

        &:disabled+label {
            cursor: not-allowed;
            opacity: $forms-opacity-disabled;
        }

        /*Hide the checkmark by default*/
        &+label::after {
            content: none;
        }

        /*Unhide on the checked state*/
        &:checked+label::before {
            background-color: $forms-color-input-background;
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-input-border;
            color: $forms-color-input-background;
        }

        /*Unhide on the checked state*/
        &:checked+label::after {
            // content: "";
            font-family: "dlt-icons";
            font-size: $checkboxes-checkmark-font-size;
            content: $checkboxes-check-content;
            background-color: transparent;
            color: $forms-color-primary;
        }

        &:indeterminate+label::before {
            background-color: $forms-color-input-background;
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-input-border;
            color: $forms-color-input-background;
        }

        &:indeterminate+label::after {
            content: "";
            @include transform(rotate(0deg) scale(1));
            border-left: 0 $checkboxes-border-style $forms-color-primary;
            border-bottom: $checkboxes-indeterminate-bottom-width $checkboxes-border-style $forms-color-primary;
            width: $checkboxes-indeterminate-width;
            left: $checkboxes-indeterminate-left;
            top: -7px;
        }

        &:checked:hover+label::before {
            background-color: $forms-color-input-background;
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-primary;
            color: $forms-color-input-background;
        }

        &:checked:hover+label::after {
            background-color: transparent;
            color: $forms-color-primary;
        }

        &:indeterminate:hover+label::before {
            background-color: $forms-color-input-background;
            color: $forms-color-input-background;
        }

        &:indeterminate:hover+label::after {
            background-color: $forms-color-input-background;
            color: $forms-color-input-background;
        }

        &:checked:focus+label::before {
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-primary;
            outline: $checkboxes-border-width-hover $checkboxes-border-style-hover $forms-color-primary;
            outline-offset: $checkboxes-outline-offset;
        }

        &:checked:focus:hover+label::before {
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-primary;
        }

        &:indeterminate:focus+label::before {
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-primary;
            outline: $checkboxes-border-width-hover $checkboxes-border-style-hover $forms-color-primary;
            outline-offset: $checkboxes-outline-offset;
        }

        &:indeterminate:focus:hover+label::before {
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-primary;
            outline: $checkboxes-border-width-hover $checkboxes-border-style-hover $forms-color-primary;
            outline-offset: $checkboxes-outline-offset;
        }
    }

    label {
        position: relative;
        display: inline-block;
        padding: $checkboxes-label-padding-y $checkboxes-label-padding-x;
        cursor: pointer;
        font-weight: $forms-label-font-weight;
        font-size: $forms-label-font-size;
        color: $forms-color-label-text;
        line-height: $checkboxes-label-line-height;
        margin: 0;

        &::before,
        &::after {
            position: absolute;
            content: "";
            display: inline-block;
        }

        /*Outer box of the fake checkbox*/
        &::before {
            height: $checkboxes-size;
            width: $checkboxes-size;
            border: $checkboxes-border-width $checkboxes-border-style $forms-color-input-border;
            border-radius: $checkboxes-border-radii;
            background-color: $forms-color-input-background;
            left: 0;
            top: 0;
        }

        /*Checkmark of the fake checkbox*/
        &::after {
            font-family: "dlt-icons";
            font-size: $checkboxes-checkmark-font-size;
            content: $checkboxes-check-content;
            height: $checkboxes-checkmark-height;
            width: $checkboxes-checkmark-width;
            left: $checkboxes-checkmark-left;
            top: $checkboxes-checkmark-top;
            // border-left: $checkboxes-checkmark-border-left $checkboxes-border-style;
            // border-bottom: $checkboxes-checkmark-border-left $checkboxes-border-style;
            // @include transform(rotate(-45deg));
        }
    }
}

.sm-checkbox {
    .dlt-checkbox-group-label {
        font-size: $checkboxes-font-size-sm;
        padding-bottom: $checkboxes-legend-padding-bottom-sm;
        line-height: $checkboxes-legend-line-height;
    }

    .dlt-form-requirement{
        padding-top: var(--dlt-spacing-1-x, .5rem);
    }

    .dlt-checkbox {
        padding: $checkboxes-padding-sm;

        label {
            font-size: $checkboxes-font-size-sm;
            line-height: $checkboxes-line-height-sm;
            padding: $checkboxes-label-padding-y $checkboxes-label-padding-x-sm;

            &::before {
                height: $checkboxes-size-sm;
                width: $checkboxes-size-sm;
                top: 1px;
            }

            &::after {
                height: $checkboxes-checkmark-height-sm;
                width: $checkboxes-checkmark-width-sm;
                left: $checkboxes-checkmark-left-sm;
                top: $checkboxes-checkmark-top-sm;
                font-size:$checkboxes-checkmark-font-size-sm !important;
            }
        }
    }
}

.dlt-checkbox-group-horizontal {
    display: flex;

    .dlt-checkbox{
        padding-bottom: 0;
    }

}

.dlt-indeterminate-checkbox-group {
    .dlt-checkbox:not(:first-of-type) {
        margin-left: $checkboxes-margin-top;
    }

    &.sm-checkbox input[type="checkbox"]:indeterminate+label::after {
        content: "";
        @include transform(rotate(0deg) scale(.8));
        border-left: 0 $checkboxes-border-style $forms-color-primary;
        border-bottom: $checkboxes-indeterminate-bottom-width $checkboxes-border-style $forms-color-primary;
        width: 8px;
        left: 2px;
        top: -3px;
    }

}