@import '../abstracts/variables';

.pagination {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0;

    .pagination-item {
        & > * {
            height: 32px;
            min-width: 32px;
            margin: 0 3px;
            padding: 0 6px;
            text-align: center;
            border-radius: 16px;
        }

        :not(pagination-item-selected) > * {
            box-shadow: none;
        }

        .button {
            line-height: normal;
        }

        .icon-button {
            padding: 0;
        }

        &-rectangular .button {
            border-radius: var(--default-borderradius);
        }

        .typography[disabled] {
            color: var(--palette-action-disabled) !important;
        }
    }

    &-outlined {
        .pagination-item-selected {
            .button-outlined-default {
                background-color: var(--palette-action-default-hover)
            }

            @each $color in $palette-colors {
                .button-outlined-#{$color} {
                    background-color: var(--palette-#{$color}-hover);
                }
            }
        }
    }

    &-filled {
        .pagination-item {
            &:not(.pagination-item-selected) .button {
                background-color: var(--palette-surface);
            }

            .button {
                box-shadow: var(--elevation-1);
            }
        }
    }

    &-small {
        .pagination-item {
            & > * {
                height: 26px;
                min-width: 26px;
                margin: 0 1px;
                padding: 0 4px;
                border-radius: 13px;
            }
        }
    }

    &-large {
        .pagination-item {
            & > * {
                height: 40px;
                min-width: 40px;
                padding: 0 10px;
                border-radius: 20px;
            }
        }
    }

    &-disable-elevation .pagination-item .button {
        box-shadow: none;
    }

    &-rtl .pagination-item .icon-root {
        transform: scaleX(-1);
    }
}