//
// Radiobutton
//
.form-radio {
    position: relative;
    font-size: 1rem;
    padding-left: 1.5rem;
    margin-bottom: @spacer;
    min-height: 1.5rem;
    min-width: 1rem;

    &.radio-md {
        min-height: 1.75rem;
        padding-left: 2rem;

        label:before {
            top: 0.125rem;
            width: 1.25rem;
            height: 1.25rem;
            .border-radius(.625rem);
        }

        input {
            &:checked {
                &+label:after {
                    left: 0.375rem;
                    top: 0.5rem;
                    width: 0.5rem;
                    height: 0.5rem;
                }
            }
        }
    }

    input {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;

        &:checked {
            &+label:before {
                background-color: var(--brand-600);
                border-color: var(--brand-600);
            }

            &+label:after {
                content: '';
                display: inline-block;
                position: absolute;
                left: 0.3125rem;
                top: 0.5625rem;
                width: 0.375rem;
                height: 0.375rem;
                .border-radius(50%);
                background: var(--white);
            }
        }

        &:focus-visible {
            &+label:before {
                outline: none;
                box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
            }
        }

        &:checked:focus-visible {
            &+label:before {
                box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
            }
        }
    }

    .form-radio-control {
        outline: none;

        &:focus-visible {
            label:before {
                box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
            }

            input:checked+label:before {
                box-shadow: 0 0 0 4px rgba(41, 112, 255, 0.24);
            }
        }
    }

    input {
        &:disabled {
            &+label {
                color: var(--grey-400);
                cursor: not-allowed;
            }

            &+label:before {
                background-color: var(--bg-50);
                border-color: var(--grey-300);
                box-shadow: none;
            }
        }

        &:checked:disabled {
            &+label:after {
                background: var(--grey-300);
            }
        }

        &.field-invalid {
            &+label:before {
                border-color: var(--error-main) !important;
            }

            &+label {
                color: var(--error-main);
                border-color: var(--error-main);
            }
        }
    }

    label {
        line-height: 1.5;
        font-weight: @font-weight-medium;
        color: var(--grey-700);
    }

    label:hover {
        cursor: pointer;
    }

    label:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.25rem;
        height: 1rem;
        width: 1rem;
        border: 1px solid var(--grey-300);
        margin-right: .25px;
        color: var(--white);
        display: flex;
        justify-content: center;
        align-items: center;
        .border-radius(50%);
    }

    label:focus-visible {
        outline: none;
        box-shadow: 0 0 0 4px rgba(152, 162, 179, 0.14);
    }

    &.form-radio-larg {
        padding-left: 0;

        .locked {
            &:before {
                font-size: 1.35rem;
                top: 12px;
                right: 1.35rem;
            }
        }

        .info {
            width: 22px;
            height: 22px;
            left: 100%;
            transform: translate(-26px, -36px);
            position: absolute;

            &:before {
                font-size: 1.35rem;
            }
        }

        input {

            &:checked {
                &+label {
                    border-color: var(--primary);
                }

                &+label:after {
                    display: none;
                }
            }
        }

        label {
            display: block;
            border: 1px solid rgba(0, 0, 0, 0.15);
            background-color: var(--white);
            padding: 14px 24px;
            .border-radius(@border-radius);

            &:before {
                display: none;
            }
        }

        &:hover {
            label {
                border-color: var(--primary);
            }
        }
    }

    small {
        display: block;
        color: var(--grey-600);
    }
}