.paginator {
    color: #6c7a89;
    text-align: center;
    background: #01010c radial-gradient(at bottom center, #00101f, #000614, #01010c) no-repeat;
    box-shadow: 0 1px 1rem #000;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-radius: .5rem;
    border: solid 2px #00101f;
    margin: 1rem;
    padding: .5rem 1rem;

    &.up {
        margin-top: 2rem;
    }

    &.down {
        margin-bottom: 2rem;
    }

    a {
        color: #ccc;
        text-decoration: none;
        display: block;

        &:hover {
            color: #fff;
        }
    }

    > details {
        grid-column: 2;
    }

    .left {
        text-align: left;
        grid-column: 1;
    }

    .right {
        text-align: right;
        grid-column: 3;
    }

    .paginator-filters {
        grid-column: 1 / 4;
        font-size: .6rem;
        display: flex;
        align-items: center;
        gap: 1rem;
    }
}