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

$borderWidth: 2px;

@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 {
        @include circle(18px);
        display: inline-block;
        vertical-align: middle;
        transition: all 200ms;

        &::before {
            transition: all 200ms;
            @include center();
            @include circle(18px);
            box-sizing: border-box;
        }
        &::after {
            transition: all 200ms;
            @include center();
            @include circle(10px);
        }
        position: relative;
    }

    &-ripple {
        @include center();
        overflow: hidden;
        @include circle(36px);
        clip-path: circle(50%);
        transition: all 200ms;
        > * {
            display: block;
            height: 100%;
        }
    }

    &:hover {
        .sd-radio_button-ripple {
            background: rgb(0 0 0 /0.1);
        }
    }
    &:active {
        .sd-radio_button-box::before {
            border: $borderWidth solid var(--md-sys-color-primary);
        }
    }
    &:focus-visible {
        outline: none;
        .sd-radio_button-ripple {
            background: rgb(0 0 0 /0.12);
        }
    }

    &-box::before {
        border: $borderWidth solid var(--md-sys-color-on-surface-variant);
    }

    &[data-sd-checked='true'] .sd-radio_button-box {
        &::before {
            border: $borderWidth solid var(--md-sys-color-primary);
        }
        &::after {
            background: var(--md-sys-color-primary);
        }
    }

    &[data-sd-disabled='true'] {
        pointer-events: none;
        filter: grayscale(98%) opacity(40%);
    }

    &-label {
        display: inline-block;
        vertical-align: middle;
        font-weight: 400;
        user-select: none;

        &:not(:empty) {
            padding: 0 8px;
        }
    }
}