.pagination {
    display: flex;
    justify-content: space-between;

    .prev {
        &.disabled {
            color: var(--color-text-muted);
        }
    }

    details {
        flex: 1;
        text-align: center;
        position: relative;

        summary {
            cursor: pointer;
        }

        ul {
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            gap: var(--gap-half);
            overflow: auto;
            max-height: 50vh;
            width: max-content;
            max-width: calc(100vw - (2 * var(--padding)));
            padding: var(--padding);
            list-style: none;
            border-radius: var(--radius-pagination);
            box-shadow: var(--shadow-pagination);
            border: var(--border-pagination);
            background: var(--background-pagination);

            li {
                font-size: 1rem;

                .current {
                    display: block;
                    font-size: 1rem;
                }

                a {
                    display: block;
                }
            }
        }
    }

    .next {
        &.disabled {
            color: var(--color-text-muted);
        }
    }
}