@use "variables" as *;

.p-selectbutton .p-button {
    background: transparent;
    border: 1px solid $input-border-color;
    color: $color-palette-gray-700;
    transition:
        background-color 0.2s,
        border-color 0.2s,
        color 0.2s,
        box-shadow 0.2s,
        background-size 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
    text-transform: uppercase;
}

.p-selectbutton .p-button:not(.p-disabled):not(.p-highlight):hover {
    background-color: $bg-hover;
    color: $color-palette-gray-800;
}

.p-selectbutton .p-button.p-highlight .p-button-icon-left,
.p-selectbutton .p-button.p-highlight .p-button-icon-right {
    color: $color-palette-gray-700;
}

.p-selectbutton .p-button.p-highlight:hover {
    background: $bg-highlight;
    border-color: $border-color-highlight;
    color: $text-color-hover;
}

.p-selectbutton .p-button.p-highlight:hover .p-button-icon-left,
.p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
    color: $text-color-hover;
}

.p-selectbutton .p-button:focus {
    background: $focus-bg;
    border-color: $border-color-highlight;
}

.p-selectbutton .p-button:focus.p-highlight {
    background: $focus-bg;
    border-color: $input-border-color;
    color: $color-palette-gray-800;
}

.p-button-tabbed {
    box-shadow: 0px 1px 0px 0px $color-palette-gray-500;
    display: inline-block;

    .p-button {
        border-radius: 0;
        padding: $spacing-3;
        border: none;

        &:focus.p-highlight,
        &.p-highlight {
            color: $color-palette-gray-800;
            box-shadow: 0px -4px 0px 0px $color-palette-primary inset;
        }
    }
}

.p-button-compact {
    .p-button {
        padding-left: $spacing-3;
        padding-right: $spacing-3;

        &.p-highlight {
            &:focus {
                background-color: $color-palette-primary;
                color: $white;
            }
            background-color: $color-palette-primary;
            color: $white;
        }
    }
}

.p-selectbutton .p-disabled {
    opacity: $field-disabled-opacity;
}
