Radiobutton

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

.radio {
    position: relative;
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    flex-shrink:0;
    border-radius: css-util.get-var(radiobutton,radius);
    background-color: css-util.get-var(radiobutton,background);
    border: css-util.get-var(radiobutton,border-width) solid css-util.get-var(radiobutton,border-color);

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

    &:checked {
        background-color: css-util.get-var(radiobutton,checked,background);
        border: css-util.get-var(radiobutton,border-width) solid css-util.get-var(radiobutton,checked,border-color);

        &:before {
            content: "";
            position:absolute;
            top:0.5rem;
            left:0.5rem;
            width: 0.6rem;
            height: 0.6rem;
            background-color: css-util.get-var(radiobutton,checked,fill);
            border-radius: css-util.get-var(radiobutton,radius);
        }
    }

    &:disabled {
        border: css-util.get-var(radiobutton,border-width) solid css-util.get-var(radiobutton,disabled,border-color);
        background: css-util.get-var(radiobutton,disabled,background);

        &:checked {
            &:before {
                background-color: css-util.get-var(radiobutton,disabled,fill);
            }
        }
    }

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

    &-item {
        display: flex;
        align-items: center;
        
        &-boxed {
            .radio-label {
                background: css-util.get-var(radio-item-boxed,background);
                border: css-util.get-var(radio-item-boxed,border-width) solid css-util.get-var(radio-item-boxed,border-color);
                padding:1rem;

                &:hover:not(:has(.radio:checked)),
                &:hover:not(:has(.radio:checked))>.radio {
                    border: css-util.get-var(radio-item-boxed,border-width) solid css-util.get-var(radio-item-boxed,hover,border-color);
                }
            }

            &:has(.radio:checked) {
                .radio-label {
                    background: css-util.get-var(radio-item-boxed,checked,background);
                    border: css-util.get-var(radio-item-boxed,border-width) solid css-util.get-var(radio-item-boxed,checked,border-color);
                }
            }
        }
    }

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

        .field-set {
            margin-left: 2.4rem;
        }

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