@import "../_colors";

@mixin buttonVariation($background-color, $text-color, $border-color) {
    &.ui-state-default {
        background-color: $background-color;
        border-color: $border-color;
    }

    & .ui-button-text,
        .ui-button-icon-left,
        .ui-button-icon-right {
        color: $text-color;
    }

    &:hover {
        background-color: darken($background-color, 15%);
    }

    &:focus {
        background-color: darken($background-color, 15%);
        border-color: #22DCE6;
    }

    &:active:not(:disabled){
        background-color: darken($background-color, 20%);
        border-color: darken($background-color, 20%);
    }
}

p-splitbutton {
    & .ui-button {
        height: 34px;
    }
    & .ui-button-text {
        font-size: 14px;
    }
}

.ui-splitbutton .ui-button {
    min-width: inherit;
}

body p-splitbutton .ui-splitbutton .ui-button {
    @include buttonVariation($default-color, $primary-dark-text-color, $default-primary-color);
}

body p-splitbutton .ui-button-primary.ui-splitbutton.ui-buttonset .ui-button {
    @include buttonVariation($primary-color, $primary-light-text-color, $primary-color);
}

body p-splitbutton .ui-button-secondary.ui-splitbutton.ui-buttonset .ui-button {
    @include buttonVariation($secondary-color, $primary-light-text-color, $secondary-color);
}

body p-splitbutton .ui-button-link.ui-splitbutton.ui-buttonset .ui-button {
    &.ui-state-default {
        background-color: transparent;
        border-color: transparent;
    }

    & .ui-button-text,
        .ui-button-icon-left,
        .ui-button-icon-right {
        color: $primary-color;
    }

    &:hover {
        background-color: transparent;

        & .ui-button-text,
            .ui-button-icon-left,
            .ui-button-icon-right {
            color: darken($primary-color, 15%);
        }
    }

    &:focus {
        background-color: transparent;
        border-color: #22DCE6;

        & .ui-button-text,
            .ui-button-icon-left,
            .ui-button-icon-right {
            color: darken($primary-color, 15%);
        }
    }

    &:active:not(:disabled){
        background-color: transparent;
        border-color: transparent;

        & .ui-button-text,
            .ui-button-icon-left,
            .ui-button-icon-right {
            color: darken($primary-color, 20%);
        }
    }
}

body p-splitbutton .ui-splitbutton.ui-buttonset .ui-button {
    &.ui-state-default:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        border-right: none;
    }
    &.ui-splitbutton-menubutton {
        margin-left: 0;
        border-left: none;
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
        margin-right: 10px;
    }

    &.ui-splitbutton-menubutton .fa {
        margin-left: -0.65em;
    }
}

body p-splitbutton .ui-button-auxiliary.ui-splitbutton.ui-buttonset .ui-button {
    &.ui-state-default:first-child {
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    &.ui-splitbutton-menubutton {
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }
}

body p-splitbutton .ui-button:not(.ui-button-icon-only) .ui-button-icon-left,
body p-splitbutton .ui-button:not(.ui-button-icon-only) .ui-button-icon-right {
    display: inline-block;
}

.ui-menu.ui-menu-dynamic {
    z-index: 100001 !important;
}

.ui-fluid .ui-splitbutton {
    width: auto;
}