@use '../../variables' as *;

$b: '.radio';

#{$b} {
    align-items: baseline;
    display: inline-flex;

    &__input {
        align-items: center;
        background-color: $radio-bg;
        border: $radio-border-width solid $radio-border-color;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        flex-shrink: 0;
        height: $radio-size;
        justify-content: center;
        top: 2px;
        transition-duration: var(--duration-micro-s);
        transition-property: background-color, border-color;
        transition-timing-function: var(--easing-standard);
        width: $radio-size;

        &::before {
            background-color: $radio-dot-color;
            border-radius: 50%;
            content: '';
            height: 100%;
            transform: scale(0);
            transition-duration: var(--duration-micro-s);
            transition-property: opacity, transform;
            transition-timing-function: var(--easing-acceleration);
            width: 100%;
        }

        :focus-visible + & {
            background-color: $radio-active-bg;
            border-color: $radio-active-border-color;
        }

        :disabled + & {
            background-color: $radio-disabled-bg;
            border-color: $radio-disabled-border-color;
            cursor: default;
        }

        :checked + &::before {
            transform: scale(0.5);
            transition-timing-function: var(--easing-deceleration);
        }

        :checked:disabled + &::before {
            opacity: 0.5;
        }
    }

    &__label {
        color: $radio-label-color;
        cursor: pointer;
        display: flex;
        flex-basis: 100%;
        flex-direction: column;
        margin-left: 4px * 2;
        transition-duration: var(--duration-micro-s);
        transition-property: color;
        transition-timing-function: var(--easing-standard);

        @include font($radio-label-font);

        :checked ~ & {
            cursor: default;
        }

        :disabled ~ & {
            color: $radio-disabled-label-color;
            cursor: default;
        }
    }
}