// https://m3.material.io/components/radio-buttons/specs

@mixin circle($r) {
    box-sizing: border-box;
    display: inline-block;
    width: $r;
    height: $r;
    border-radius: $r;
}

@mixin center {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sd-radio_button {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent; // remove webkit blue tap effect

    &-box {
        display: inline-block;
        vertical-align: middle;
        @include circle(2rem);
        transition: all 200ms;
        position: relative;
        &::before {
            transition: all 200ms;
            @include center();
            @include circle(1rem);
        }
        &::after {
            transition: all 200ms;
            @include center();
            @include circle(0.5rem);
        }
    }

    &[data-sd-checked='true'] .sd-radio_button-box {
        &::before {
            border: 2px solid var(--sd-sys-color-primary);
        }
        &::after {
            background: var(--sd-sys-color-primary);
        }
    }
    &[data-sd-checked='false'] .sd-radio_button-box {
        &::before {
            border: 2px solid var(--sd-sys-color-on-surface-variant);
        }
        &::after {
            @include circle(0);
        }
    }

    &:hover {
        .sd-radio_button-box {
            background: rgb(0 0 0 /0.1);
        }
    }
    &:focus {
        outline: none;
        .sd-radio_button-box {
            background: rgb(0 0 0 /0.12);
        }
    }

    &-label {
        display: inline-block;
        vertical-align: middle;
        padding: 0 0.25rem;
    }
}