.radio {
    align-items: center;
    cursor: default;
    display: flex;
    height: var(--size-medium);
    position: relative;

    &__button {
        opacity: 0;
        width: 10px;
        height: 10px;
        margin: 0;
        padding: 0;
    }
    &__button:checked + &__label:before {
        background-image: url('data:image/svg+xml,%3Csvg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Crect width="6" height="6" rx="3" fill="black" fill-opacity="0.8"/%3E%3C/svg%3E%0A');
        background-repeat: no-repeat;
        background-position: 2px 2px;
    }
    &__button:disabled + &__label {
        opacity: 0.3;
    }
    &__button:checked:disabled + &__label:before {
        border: 1px solid var(--black);
    }

    &__label {
        align-items: center;
        color: var(--black8);
        display: flex;
        font-family: var(--font-stack);
        font-size: var(--font-size-xsmall);
        font-weight: var(--font-weight-normal);
        line-height: var(--font-line-height);
        letter-spacing: var(--font-letter-spacing-pos-xsmall);
        margin-left: -16px;
        padding: 0 var(--size-xsmall) 0 var(--size-small);
        height: 100%;
        user-select: none;

        &:before {
            border: 1px solid var(--black8);
            border-radius: var(--border-radius-small);
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            margin: 2px 10px 0 -8px;
            border-radius: 50%;
        }
    }
}