@use "sass:color";

body {
    .p-button {
        background-color: #428bca;
        border: none;
        border-radius: 4px;
        color: #fff;
        font-family: "Open Sans", sans-serif;
        font-size: 14px;
        min-width: 80px;
        min-height: 35px;
        padding: 8px 12px;
        transition:
            background-color 200ms ease-out,
            color 200ms ease-out,
            border-color 200ms ease-out;

        &:disabled {
            opacity: 0.5;
        }

        &.p-button-icon-only {
            min-width: 32px;
        }

        &:not(.p-button-icon-only) {
            .p-button-icon-left,
            .p-button-icon-right {
                display: none;
            }
        }

        &.p-button-primary {
            @include buttonVariation($primary-color, $primary-light-text-color, $primary-color);
        }

        &.p-button-secondary {
            @include buttonVariation($secondary-color, $primary-light-text-color, $secondary-color);
            background-color: #7892a1;

            &:hover:not(:disabled) {
                background-color: #426e78;
            }
        }

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

        &.p-button-danger {
            background-color: #9c3a3a;

            &:hover:not(:disabled) {
                background-color: #431919;
            }
        }

        &.p-button-link {
            .p-state-default {
                background-color: transparent;
                border-color: transparent;

                .p-button-text {
                    color: $primary-color;
                }

                &:hover {
                    background-color: transparent;

                    .s-button-icon,
                    .s-button-text,
                    .s-button-menu-icon {
                        color: color.adjust($primary-color, $lightness: -15%);
                    }
                }

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

                    .p-button-text {
                        color: color.adjust($primary-color, $lightness: -15%);
                    }
                }

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

                    .p-button-text {
                        color: color.adjust($primary-color, $lightness: -20%);
                    }
                }
            }
        }

        &:hover:not(:disabled),
        &:active:not(:disabled) {
            background-color: #063951;
        }

        &:focus {
            outline: 1px solid #1d2f34;
        }
    }

    .p-button-icon-only,
    .p-button-icon-only:not(:disabled):hover {
        background-color: transparent;
        color: #6e7280;

        .p-icon {
            height: 12px;
            width: 12px;
        }
    }

    // Ordem corrigida aqui
    s-button + button,
    s-button + p-button,
    s-button + s-button,
    button + s-button,
    p-button + s-button,
    p-button + p-button {
        margin-left: 10px;
    }

    .p-fluid {
        s-button button {
            width: 100%;
        }
    }
}