@use "sass:math";
@use "../../../../styles";

@layer components {
    $md-radio-checked-color: styles.$primary;
    $md-radio-border-color: #c6c9cf;
    $md-radio-size: 16px;
    $md-radio-checked-size: 8px;
    $md-radio-ripple-size: 15px;

    @keyframes ripple {
        0% {
            box-shadow: 0 0 0 1px rgba(#000, 0);
        }

        50% {
            box-shadow: 0 0 0 $md-radio-ripple-size rgba(#000, .1);
        }

        100% {
            box-shadow: 0 0 0 $md-radio-ripple-size rgba(#000, 0);
        }
    }

    .radio-button {
        @include styles.button-reset;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 2px;
        cursor: pointer;

        &._checked {
            .radio-button__box {
                border-color: $md-radio-checked-color;
                animation: ripple 0.2s linear forwards;

                &::before {
                    transform: scale(1);
                }
            }
        }

        &._disabled {
            cursor: not-allowed;
            opacity: 0.6;

            .radio-button__box {
                border-color: #dde1e2;
            }
        }

        .radio-button__input {
            display: none;
        }

        .radio-button__box {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            width: $md-radio-size;
            height: $md-radio-size;
            border: 1px solid $md-radio-border-color;
            border-radius: 50%;
            transition: border-color styles.$trans;

            &::before {
                content: '';
                width: $md-radio-checked-size;
                height: $md-radio-checked-size;
                background: $md-radio-checked-color;
                border-radius: 50%;
                transform: scale(0);
                transition: transform styles.$trans;
            }
        }

        .radio-button__content {
            flex: 1 1 0;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: .1px;
            color: #000;
            padding: 8px 0;
        }
    }
}
