Checkbox

                @use "../abstracts/css-util";

.checkbox {
    position: relative;
    margin: 0;
    height:1.8rem;
    width:1.8rem;
    flex-shrink:0;

    &:before {
        font-family: 'Material Symbols Outlined';
        font-size: 1.8rem;
        line-height:1;
        content: "";
        display: block;
        position: absolute;
        width: 1.8rem;
        height: 1.8rem;
        top: 0;
        left: 0;
        color: css-util.get-var(checkbox,icon-color);
        border: css-util.get-var(checkbox,border-width) solid css-util.get-var(checkbox,border-color);
        border-radius: css-util.get-var(checkbox,radius);
        background-color: css-util.get-var(checkbox,background);
    }

    &:hover:not(:disabled) {
        &:before {
            border: css-util.get-var(checkbox,border-width) solid css-util.get-var(checkbox,hover,border-color);
        }
    }

    &:disabled {
        &:before {
            content: "";
            border: css-util.get-var(checkbox,border-width) solid css-util.get-var(checkbox,disabled,border-color);
            background: css-util.get-var(checkbox,disabled,background);
        }

        &:checked {
            &:before {
                background: css-util.get-var(checkbox,disabled,background);
                border: css-util.get-var(checkbox,border-width) solid css-util.get-var(checkbox,disabled,border-color);
                color: css-util.get-var(checkbox,disabled,icon-color);
            }
        }
    }

    &:checked {
        &:before {
            content: 'check';
            background: css-util.get-var(checkbox,checked,background) css-util.get-var(checkbox,checked,icon,check) center center no-repeat;
            border: css-util.get-var(checkbox,border-width) solid css-util.get-var(checkbox,checked,border-color);
        }
    }

    &-item {
        display: flex;
        align-items: center;
        text-align: start;
    }

    &-label {
        font-family: css-util.get-var(checkbox-label,font);
        font-size: css-util.get-var(checkbox-label,text-size);
        font-weight: css-util.get-var(checkbox-label,text-weight);
        color: css-util.get-var(checkbox-label,text-color);
        display: flex;
        align-items: flex-start;
        flex-direction: row;
        gap: css-util.get-var(checkbox-item,gap);
    }

    &-list{
        display: flex;
        flex-direction: column;
        gap: css-util.get-var(checkbox-list,gap);

        &-row {
            flex-direction: row;
            flex-wrap: wrap;
        }
    }
}