$border: 1px solid #c1c1cc;

body .p-selectbutton {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;

    .p-togglebutton {
        background-color: #fff;
        border-top: $border;
        border-bottom: $border;
        border-radius: 0;
        color: #212533;
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        margin: 0;
        padding: 8px 12px;
        outline: none;
        border-right: $border;

        &.p-disabled {
            background-color: #fbfafc;
            color: #c1c1cc;
        }

        &.p-highlight,
        &-checked {
            background-color: #c1c1cc;
            font-weight: 700;
        }
    }

    p-togglebutton:first-child > .p-togglebutton {
        border-radius: 4px 0 0 4px;
        border-left: $border;
    }

    p-togglebutton:last-child > .p-togglebutton {
        border-radius: 0 4px 4px 0;
    }

    .p-togglebutton:hover:not(.p-togglebutton-checked) {
        background-color: #eeebf2;
    }
}