@import "../_colors";

body {
    p-radiobutton {
        display: flex;
        align-items: center;
    }

    p-radiobutton+p-radiobutton {
        margin-left: 40px;
    }

    .ui-radiobutton {
        margin-right: 10px;
        margin-top: 1px;
        vertical-align: top;

        .ui-radiobutton-box {
            background-color: $default-color;
            border: 1px solid $default-primary-color;
            border-radius: 50%;
            height: 20px;
            transition: background-color 400ms ease-out, border-color 400ms ease-out;
            width: 20px;

            &.ui-state-active {
                background-color: $primary-color;
                border-color: $primary-color;
                color: $primary-light-text-color;
            }

            &:not(.ui-state-disabled):not(.ui-state-active):hover {
                background-color: highlight($default-primary-color);
            }

            &.ui-state-focus,
            &:active {
                border: 1px solid highlight($primary-color);
            }
        }
    }

    .ui-radiobutton-label {
        max-width: calc(100% - 30px);
        display: inline-block;
        margin-bottom: 0;
    }
}