.os-radio-button {
    display: block;
    position: relative;
    user-select: none;
    padding-top: 8px;
    padding-bottom: 8px;
    display: flex;
    align-items: center;

    input {
        position: absolute;
        opacity: 0;
        height: 0;
        width: 0;

        + label {
            display: flex;
            align-items: center;
            position: relative;
            font-size: 14px;

            &:before {
                content: "";
                display: inline-block;
                height: 16px;
                width: 16px;
                margin-right: 8px;
                background-color: transparent;
                border: 2px solid #6e6e6e;
                border-radius: 50%;
                transition: ease 0.2s all;
            }
        }

        &:hover + label:before {
            border: solid 2px #000000;
        }

        &:checked + label {
            &:before {
                background: rgb(var(--os-primary-color));
                border: solid 2px rgb(var(--os-primary-color));
            }

            &:after {
                content: "";
                position: absolute;
                transition: ease 0.1s all;
                background-color: #ffffff;
                left: 5px;
                top: calc(50% - 4px);
                width: 9px;
                height: 9px;
                transform: translateX(0.5px) translateY(-0.5px);
                border-radius: 50%;
            }
        }
    }

    &:hover:not(.os-disabled) label:before {
        border: solid 2px #000000 !important;
    }

    &.os-disabled {
        color: #acacac;

        input {
            + label:before {
                background: #acacac;
                border: solid 2px #acacac;
            }

            &:checked + label {
                &:after {
                    border: solid #acacac;
                    border-width: 0 1px 1px 0;
                }
            }
        }
    }
}
