@import (once) "../../include/vars";
@import (once) "../../include/mixins";

:root {
    --custom-checkbox-size: 36px;
    --custom-checkbox-icon-size: 16px;
    --custom-checkbox-color: #575757;
    --custom-checkbox-background: transparent;
    --custom-checkbox-caption-color: #191919;
    --custom-checkbox-background-disabled: #e8e8e8;
    --custom-checkbox-color-disabled: #c3c3c3;
}

.dark-side {
    --custom-checkbox-color: rgb(166, 166, 166);
    --custom-checkbox-background: transparent;
    --custom-checkbox-caption-color: #e8e8e8;
    --custom-checkbox-background-disabled: #353535;
    --custom-checkbox-color-disabled: #6c6c6c;
}

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    height: var(--custom-checkbox-size);
    flex-flow: row nowrap;
    padding: 0 calc(var(--custom-checkbox-size)/4);
    line-height: var(--custom-checkbox-size);
    cursor: pointer;
    user-select: none;
}

.custom-checkbox {
    .hideElement(input);

    .icon {
        font-size: var(--custom-checkbox-icon-size);
        width: var(--custom-checkbox-icon-size);
        height: var(--custom-checkbox-icon-size);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        order: 1;

        * {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    
    .state-on, .caption-state-on {
        display: none;
    }

    .state-off, .caption-state-off {
        display: flex;
    }

    input:checked ~ .icon .state-on,
    input:checked ~ .caption .caption-state-on {
        display: flex;
    }

    input:checked ~ .icon .state-off,
    input:checked ~ .caption .caption-state-off {
        display: none;
    }

    .caption {
        height: var(--custom-checkbox-size);
        display: flex;
        align-items: center;
        margin: 0 6px;
        order: 2;
        white-space: nowrap;
        font-size: calc( var(--custom-checkbox-icon-size) *.75 );
    }

    &.caption-left {
        .icon {
            order: 2;
        }

        .caption {
            order: 1;
        }
    }
    
    input:disabled ~ .icon, input:disabled ~ .caption {
        border-color: var(--custom-checkbox-background-disabled);
        color: var(--custom-checkbox-color-disabled);
    }
}