@use "../common/utils" as *;
@use "../common/mixins" as *;

.filter-pagination {

    .pagination-list{
        display: flex;
        justify-content: center;
        gap: calc-rem(3px);
        list-style-type: none;
        padding-left: 0;
        margin-bottom: 0;
    }

    .filter {
        width: calc-rem(30px);
        height: calc-rem(30px);
        border: calc-rem(1px) solid rgba(var(--color-border));
        border-radius: 100%;
        font-size: calc-rem(12px);
        transition: .3s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &:hover {
            background: rgba(var(--color-secondary), .2);
        }

        &.not-active {
            opacity: .3;
        }

        &.active {
            background: rgba(var(--color-primary));
            border-color: rgba(var(--color-primary));
            color: rgba(var(--color-white));
            font-variation-settings: var(--font-variation-settings-bold);
        }

        &.previous {
            svg {
                rotate: 180deg;
            }
        }
    }

}

