@import "../_colors";
@import "../_queries";

body .p-paginator {
    display: flex;
    flex-wrap: nowrap;
    padding: 12px 0;

    .p-select {
        width: auto;
    }

    .p-paginator-first,
    .p-paginator-last,
    .p-paginator-prev,
    .p-paginator-next {
        .p-icon-wrapper {
            svg {
                display: none;
            }
        }
    }

    .p-paginator-first {
        border-radius: 4px 0 0 4px;

        .p-icon-wrapper {
            &::before {
                content: "\f048";
            }
        }
    }

    .p-paginator-last {
        border-radius: 0 4px 4px 0;

        .p-icon-wrapper {
            &::before {
                content: "\f051";
            }
        }
    }

    .p-paginator-prev {
        .p-icon-wrapper {
            &::before {
                content: "\f0da";
            }
        }
    }

    .p-paginator-next {
        .p-icon-wrapper {
            &::before {
                content: "\f0d9";
            }
        }
    }

    .p-paginator-first,
    .p-paginator-prev,
    .p-paginator-next,
    .p-paginator-page,
    .p-paginator-last {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
        min-height: 35px;
        min-width: 35px;
        padding: 8px;
        border: 1px solid #c1c1cc;
        color: #428bca;

        &:not(.p-paginator-first) {
            border-left: none;
        }
    }

    p-dropdown {
        margin-left: 16px;

        .p-dropdown-label {
            min-width: unset;
            padding: 0 8px;
        }
    }

    .p-paginator-pages {
        display: flex;

        .p-paginator-page {
            font-family: "Open Sans", sans-serif;
            font-size: 14px;

            &-selected {
                background-color: #428bca;
                color: #fff;
            }
        }
    }

    .p-paginator-right-content {
        margin-left: auto;
    }
}

@media #{$sm-devices} {
    .p-paginator {
        .p-paginator-pages {
            .p-paginator-page {
                &:not(.p-highlight) {
                    display: none;
                }
            }
        }
    }
}

// TODO: verificar quando isso é aplicado
.sds-extended-paginator .p-dropdown-panel {
    top: -210px !important;
}

.sds-extended-paginator .p-dropdown-panel .p-dropdown-items-wrapper {
    max-height: 250px !important;
}